试图复制重复的效果

Question

您好我最近浏览了一些针对客户端网站的演示。看到了我喜欢的很酷的东西。所以我尝试在浏览器中检查一下，看看我是否自己复制了这个效果。我不知道他们是怎么做到的。

这是演示的链接 http://www.templatemonster.com/demo/45057.html 这是一个n图像，以显示我在说什么。

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

我能够抓取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;
}

这是一个更新的小提琴：http://jsfiddle.net/w1defmkz/1/

Answer 2

嗯，用户已经添加了两个分区，使它们成为绝对分区。

你看，整个范围（class =＆＃34; span2＆＃34;）都是相对的。

这是其中一个的css ......

content: "";
display: block;
position: absolute;
left: 1px;
right: 1px;
bottom: -4px;
height: 2px;
background: #f1f6f9;
border: 1px solid #c5d0d2;
border-top: none;

Js Fiddle：http://jsfiddle.net/3my6rhgL/