CSS中的不对称背景阴影

Question

CSS中的不对称背景阴影

htmlcsscss-shapes

3

我正在尝试在CSS上创建背景效果，目前我只是使用类似示例的背景图像：

背景图像

但我认为一定有一种方法可以在CSS上实现这种效果，我已经寻找了很长时间，但无论如何都找不到正确的答案。请问是否有一种用CSS创建容器的不对称背景的方法？

- Riquelmy Melara

3

CSS变形（CSS Transforms）...倾斜（skew）。 - DaniP

1

试一下 - http://jsfiddle.net/qgsnb0or/ - Anonymous

2

非常接近我所需要的，你能把它发布为答案吗？我认为那就是我要的。 - Riquelmy Melara

你也可以在旋转操作中使用剪辑或前后参数。 - davidcondrey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anonymous · Accepted Answer

你可以通过使用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>