A Pen by John Gerome Baldonado.

index.html

<h1>Multiple Backgrounds and Borders with CSS 2.1</h1>

<div class="box">
 <p>[Content]</p>
</div>

<hr />

<img src="http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/css2-multiple-background-border-model.png" alt="" />

<p>Reference: <a href="#">http://nicolasgallagher.com</a></p>

Pseudo-Element-:after-and-:before---Multiple-Backgrounds-and-Borders-with-CSS-2.1.markdown

Pseudo Element :after and :before / Multiple Backgrounds and Borders with CSS 2.1

Multiple Backgrounds and Borders with CSS 2.1

A Pen by John Gerome Baldonado on CodePen.

License.

style.scss

$width-box: 400px;
$height-box: 200px;


.box {
  background: #A5BC54;
  border: 10px solid darken(#A5BC54, 8%);
  width: $width-box;
  height: $height-box;
  position: relative;
  z-index: 1;
  margin: 0 auto;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    z-index: -1;
  }
  &:before {
    background: #67B4A2;
    border: 10px solid darken(#67B4A2, 8%);
    top: 5%;
    left: 10%;
    width: 80%;
    height: 80%;
  }
  &:after {
    background: #D9BB35;
    border: 10px solid darken(#D9BB35, 8%);
    top: 15%;
    left: 20%;
    height: 60%;
    width: 60%;
  }
  
  p {
     background: white;
     border: 1px solid #666;
     width: $width-box / 4;
     height: $height-box / 4;
     line-height: $height-box / 4;
     text-align: center;
     position: absolute;
     left: 40%;
     top: 30%;
  }
}