html - 3D光影效果纸样造型

Question

我可以将这种样式添加到所有圆锥体而不仅仅是底 Angular 吗？ - 如果是，我该怎么做。我试图在侧面而不是底部制作它，它应该看起来像一张纸，每个 Angular 都折叠了。如果你看看前任。 2 如果你点击链接。我想在底部和顶部添加相同的样式，以便所有 4 个 Angular 都折叠起来..

http://cssdeck.com/labs/different-css3-box-shadows-effects

我已成功到达顶 Angular ，但缺少底 Angular 。这是我的代码..

HTML:

#d {
  margin: auto;
  width: 1140px;
  position: relative;
  z-index: 30000;
}
.content_wrapper {
  margin: auto;
  width: 1140px;
  position: absolute;
  z-index: 30;
}
.content_inner {
  width: 1140px;
  height: 800px;
  float: left;
  background-color: #baced8;
}
.effect {
  position: relative;
}
.effect:before,
.effect:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 40px;
  left: 19px;
  width: 50%;
  top: 4%;
  max-width: 300px;
  background: rgba(101, 102, 103, 0.9);
  -webkit-box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
  -moz-box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
  box-shadow: 0 0 15px 10px rgba(101, 102, 103, 0.9);
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect:after {
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 19px;
  left: auto;
}
#content_box {
  width: 1134px;
  height: 770px;
  float: left;
  margin-left: 3px;
  background-color: white;
}

<div id="d">
  <div class="content_wrapper">
    <div class="content_inner effect effect2">
      <div id="content_box">

      </div>
      <!--content_box-->
    </div>
    <!--content_inner-->
  </div>
  <!--content_wrapper-->
</div>

Answer 1

您可以使用另一个元素，如 .content_wrapper 来获得另外两个伪元素。那两个正在向底部显示阴影。

我假设它看起来像您想要的那样:

http://codepen.io/anon/pen/pvmYXm

effect:before, .effect:after, 
  .content_wrapper:before, .content_wrapper:after {
    content: "";  
    position: absolute;  top: 4%; bottom: 40px;  left: 19px; 
    width: 50%; max-width: 300px;

    background: rgba(101,102,103,0.9);
    box-shadow: 0 0 15px 10px rgba(101,102,103,0.9);

    -webkit-transform: rotate(-3deg);
        -ms-transform: rotate(-3deg);
            transform: rotate(-3deg);

    z-index: -1;
  }
  .effect:after, .content_wrapper:after  {
      right: 19px;  left: auto;    
      -webkit-transform: rotate(3deg);
          -ms-transform: rotate(3deg);
              transform: rotate(3deg);

  }

  .content_wrapper:before {
      -webkit-transform: rotate(3deg);
          -ms-transform: rotate(3deg);
              transform: rotate(3deg);
  }
  .content_wrapper:after {
      bottom: 40px; right: 19px;
      -webkit-transform: rotate(-3deg);
          -ms-transform: rotate(-3deg);
              transform: rotate(-3deg);
  }