html - CSS 上的不对称背景阴影

Question

<分区>

Answer 1

您可以使用 css transform 来做到这一点像这样:

JSFiddle - DEMO

body {
    background:url('http://thumbs.xdesktopwallpapers.com/wp-content/uploads/2011/11-1/Drops-On-Green-Background-720x405.jpg')
}
div {
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 22px;
    width: 600px;
    height: 400px;
    margin: 0 auto;
    -webkit-transform: perspective(600px) rotateX(15deg);
    -moz-transform: perspective(600px) rotateX(15deg);
    transform: perspective(600px) rotateX(15deg);
    display: table;
    padding: 0 40px;
    box-sizing: border-box;
}
p {
    display: table-cell;
    vertical-align: middle;
    -webkit-transform: perspective(600px) rotateX(-15deg);
    -moz-transform: perspective(600px) rotateX(-15deg);
    transform: perspective(600px) rotateX(-15deg);
}

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin luctus vestibulum elementum. Vivamus feugiat diam eget aliquet fringilla. Nullam et ex id dui malesuada bibendum. Duis interdum pharetra nibh sit amet lacinia. Sed sit amet fermentum diam. Nulla euismod libero nibh, ac volutpat nulla luctus vitae. Nulla sit amet lectus odio.</p>
</div>