html - 试图复制重复的效果

Question

你好，我最近浏览了一些为客户提供的网站演示。看到了一件我喜欢的非常酷的东西。所以我尝试在浏览器中检查，看看我是否自己复制了效果。我不知道他们是怎么做到的。

这是演示链接 http://www.templatemonster.com/demo/45057.html 这是一张图片来展示我在说什么。

他们有这些正方形，底部有溢出，看起来像多个元素。

我能够获取 HTML/CSS 并复制只有一个框而没有溢出。但是我不知道如何让它看起来像堆叠的盒子，也找不到代码在哪里。

我尝试使用 JSFidle 进行复制，您可以在此处看到 HTML

<div class="span2"><div class="service-box boxed green"><a href="coding/mauris-posuere/"><figure class="icon"><i class="icon-file-alt"></i></figure><div class="service-box_body"><h2 class="title">Accounting valuations</h2></div></a></div> </div>

.service-box.boxed {
    border-radius: 0px;
    box-shadow: none;
    padding: 25px 15px;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    background: none repeat scroll 0% 0% #F1F6F9;
    overflow: visible;
    border: 1px solid #C5D0D2;
}

http://jsfiddle.net/w1defmkz/

Answer 1

你很接近但错过了 :before和 :after伪元素:

.service-box.boxed:before, .service-box.boxed:after {
  content: "";
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -4px;
  height: 2px;
  background: #f1f6f9;
  border: 1px solid #c5d0d2;
  border-top: none;
}

.service-box.boxed:before, .service-box.boxed:after {
  content: "";
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: -4px;
  height: 2px;
  background: #f1f6f9;
  border: 1px solid #c5d0d2;
  border-top: none;
}

.service-box.boxed:after {
  left: 3px;
  right: 3px;
  bottom: -7px;
}

这是一个更新的 fiddle :http://jsfiddle.net/w1defmkz/1/