triangle

by Annemarie Köhler

HTML

<div class="container">
  <div class="menu"></div>
</div>

CSS

body {
  height:100%; width:100%;
  background-color:#ccc;
}

.menu {
  position:absolute;
  top:50%; left:50%;
  background-color:#FFF;
  box-shadow:rgba(0,0,0, 0.2) 0px 1px 3px;
  margin:-50px 0 0 -75px;
  text-align:center;
  line-height:100px;
  font-family:sans-serif;
  font-weight:200;
  font-size:10pt;
  color:#AAA;
}
.menu:before {
  position:absolute;
  top:-10px; right:10px;
  content: '';
  width: 0;
  height: 0;
	border-left: 60px solid white;
	border-right: 60px solid transparent;
	border-bottom: 60px solid transparent;
  z-index:2;
}
.menu:after {
  position:absolute;
  top:-10px; right:8px;
  content: '';
  width: 0;
  height: 0;
  filter: blur(1px);
	border-left: 62px solid rgba(0,0,0, 0.1);
	border-right: 62px solid transparent;
	border-bottom: 62px solid transparent;
  z-index:1;
}