这个阴影可以在CSS中创建吗？

Question

如何在CSS中创建以下双角度阴影？它甚至可能吗？

Answer 1

使用以下HTML：

<div class="box"></div>​

和以下CSS：

.box {
    width:70%;
    height:200px;
    margin:40px auto;
    position: relative;
    background-color: red;
}
.box:before, .box:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.box:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}​

直播example

Answer 2

是：http://matthamm.com/box-shadow-curl.html

另外：http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

Answer 3

你可以在盒子后面放两个div，带有一个填充和一个盒子阴影。然后旋转一下。我可能会用图像来做，但看起来更干净。

Answer 4

是的，可以使用before和after伪元素。

你绝对定位两个，你用它们旋转，比如5deg（实际上，一个用5，另一个用-5），你给它们每个box-shadow然后你调整传播值，这样阴影看起来比盒子本身小。并设置z-index使其出现在div之后。

链接到演示http://dabblet.com/gist/2789364

代码的相关部分

.box:before, .box:after {
    bottom: 0;
    min-height: 45%;
    width: 65%;
    border-radius: 3px;
    box-shadow: 0 0 10px rgba(204,204,204,.4);
    position: absolute;
    z-index: -1;
    background: rgba(204,204,204,.4);
    content: '';
}
.box:before {
    left: 5px;
    transform: rotate(-5deg);
}
.box:after {
    right: 5px;
    transform: rotate(5deg);
}