CSS上的不对称背景阴影

Question

我正在尝试在CSS上创建背景效果,目前我只使用形状像示例的背景图像:

但是我认为必须有一种方法可以对CSS做这种效果,我一直在寻找这个问题太久了,我无法在任何地方找到正确的答案,有没有办法做到这一点？

所以我需要的是用CSS完成的容器的不对称背景.

Answer 1

你可以这样使用css 转换:

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>