Envelope

by Steve Ayers

HTML

<div class="envelope">
  <div class="flap">

  </div>
  <div class="flap-border">

  </div>
    <div class="bottom-flap">

  </div>
  <div class="bottom-flap-border">

  </div>
</div>

CSS

.envelope {
  background: white;
  height: 200px;
  width: 400px;
  position: relative;
}
.flap {
  position: absolute;
  width: 0; 
	height: 0; 
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-top: 100px solid #eee;
  z-index: 999;
}
.bottom-flap {
  position: absolute;
  width: 0; 
	height: 0;
	border-left: 200px solid transparent;
	border-right: 200px solid transparent;
	border-bottom: 120px solid #eee;
  bottom: 0;
}
.flap-border {
  position: absolute;
  width: 0; 
	height: 0; 
	border-left: 195px solid transparent;
	border-right: 195px solid transparent;
	border-top: 98px solid white;
  left: 5px;
  top: 0px;
  z-index: 999;
}
.bottom-flap-border {
  position: absolute;
  width: 0; 
	height: 0; 
	border-left: 195px solid transparent;
	border-right: 195px solid transparent;
	border-bottom: 118px solid white;
  left: 5px;
  bottom: 0;
}