Trying to replicate duplicate effect - html

Question

Hello I was recently browsing around some demo for websites for client. And saw a really cool thing I liked. So I try to inspect in the browser to see if I replicate the effect on my own. And I have no idea how they did it.
here is the link to the demo
http://www.templatemonster.com/demo/45057.html
And here is a n image to show what I'm talking about.
They have these squares with an overflow at the bottom looking like multiple elements.
I was able to grab the HTML/CSS and replicate the just one box without the overflow. But I can't figure out how to make it look like stacked boxes, nor can I find where the code is.
I tried to replicate using JSFidle as you can see here
HTML
<div class="span2"><div class="service-box boxed green"><figure class="icon"><i class="icon-file-alt"></i></figure><div class="service-box_body"><h2 class="title">Accounting valuations</h2></div></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

You're pretty close but missing the :before and :after pseudo elements:
.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;
}
Here's an updated fiddle: http://jsfiddle.net/w1defmkz/1/

Answer 2

Well, The user has added two more divisions, made them absolute.
You see, the whole span (class = "span2") is positioned relative.
This is the css for the one of them...
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/