A Pen by Amy .

index.html

<div id="box"></div>

Single-Element-Box.markdown

Single Element Box

Playing around with :before and :after to create a singe element box. Flaps are created using box-shadow.

A Pen by Amy on CodePen.

License.

style.css

body {
  margin-top: 150px;
}
#box { /*Left*/
  position:relative;
  float: left;
  margin-bottom: 200px;
  margin-left: 200px;
  width:100px;
  height:100px;
  background-color:#8b5b37;
  -webkit-transform: skew(0deg,20deg); 
  -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(255,255,255,0.5)));
  box-shadow: inset 0 0 30px #4f3924;
}
#box:after { /*right*/
  content: ""; /*must have content "" to show up*/
  position:fixed;
  width:100px;
  height:100px;
  margin-left:100px;
  margin-top: -42px;
  background-color:#be814a;
  -webkit-transform: skew(0deg,-40deg); 
  -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(30%, transparent), to(rgba(255,255,255,0.5)));
  box-shadow: inset 0 0 30px #e1ae75;
}
#box:before { /*top*/
  content: ""; /*must have content "" to show up*/
  position:fixed;
  width:100px;
  height:84px;
  margin-top:-84px;
  margin-left: 50px;
  background-color:#4f3924;
  -webkit-transform: skew(310deg,0deg);
  box-shadow: 0px 30px 1px 0px #e1ae75, 0px -30px 1px 0px #e1ae75, 35px 0px 1px 0px #e1ae75, -35px 0px 1px 0px #e1ae75, inset 0 0 60px #000000;
  z-index: 10; /*drop shadows make the flaps*/
 }