CSS 4 个边 Angular 都翘起？

Question

我很谦虚地来到你们这些大大脑面前，因为我的小大脑根本不参与这个。

我需要在图像的所有 4 个边上执行升 Angular 效果。

我发现了 3 种不同的方法来完成翘 Angular :

带有框阴影和旋转 http://jsfiddle.net/zuul/mPnTP/

.drop-shadow {
    position:relative;
    float:left;
    width:40%;    
    padding:1em; 
    margin:2em 10px 4em; 
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute; 
    z-index:-2;
}

.drop-shadow p {
    font-size:16px;
    font-weight:bold;
}

/* Lifted corners */

.lifted {
    -moz-border-radius:4px; 
         border-radius:4px;
}

.lifted:before,
.lifted:after { 
    bottom:15px;
    left:10px;
    width:50%;
    height:20%;
    max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);   
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);    
       -moz-transform:rotate(-3deg);   
        -ms-transform:rotate(-3deg);   
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}

.lifted:after {
    right:10px; 
    left:auto;
    -webkit-transform:rotate(3deg);   
       -moz-transform:rotate(3deg);  
        -ms-transform:rotate(3deg);  
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}

<div class="drop-shadow lifted">
  <p>Lifted corners</p>
</div>

具有线性渐变和旋转 http://cssdeck.com/labs/page-curl-box-shadow

带有盒子阴影和倾斜 http://www.readitsideways.com/css3_demos/shadows/ .

倾斜示例似乎在缩放时比旋转时变形更多。可能有一种方法比其他方法更干净？

所有示例仅显示效果的两侧 - 而我试图添加其他两侧的欺骗似乎抵消了原来的两侧。我也未能成功地将样式直接应用于图像，尽管这可能是填充或边距问题。

我的问题:

可以在 4 面完成吗？

两个 div，一个 div 嵌套并堆叠在另一个 div 之上，图像位于内部 div 中？

或者，可以用一个 div 和一张图片来完成吗？

如果我能帮助解决这个问题，我将不胜感激，因为我完全不知所措。

谢谢!

12月1日更新

@瓦尔斯

感谢您的贡献!有很多不同的方法可以得到相似的结果!我在上面发布了 3 种方法，然后找到了第四种方法，它使用框阴影和线性渐变，没有旋转或倾斜:

http://cjwainwright.co.uk/webdev/liftedcorners/

你的使用了盒子阴影和变换，我将其称为方法#5。我注意到这涵盖了 2 个侧面，顶部和底部，我正在寻找 4 个侧面的解决方案。

我收到了一个 4 面解决方案 (#6)，它使用框阴影并按跨度旋转，感谢 WW 列表中的 Danny Williams: http://codepen.io/dsongman/pen/PPMdpb?editors=110

Answer 1

我不确定这是否重复，有很多关于此的例子。

但是我没有看到任何具有所有 4 个 Angular 的东西，所以这是我的解决方案

.test {
    width: 700px;
    height: 300px;
    margin: 50px;
    position: relative;
  background-color: lightgreen;
}


.test:before {
    content: "";
    position: absolute;
    width: 30%;
    height: 96%;
    top: 2%;
    left: 40px;
    transform: perspective(500px) rotateY(10deg);
    transform-origin: left center;
    box-shadow: 0px 0px 30px 10px black;
    z-index: -1;
}

.test:after {
    content: "";
    position: absolute;
    width: 30%;
    height: 96%;
    top: 2%;
    right: 40px;
    transform: perspective(500px) rotateY(-10deg);
    transform-origin: right center;
    box-shadow: 0px 0px 30px 10px black;
    z-index: -1;
}

<div class="test"></div>