CSS Triangle with Shadow

Recently I was designing a white drop down on a white background. No problem, I could just add a nice drop shadow to the drop down, to create depth between itself and the white background.

Problem, this drop down consisted of a little arrow tab at the top. Easy enough to create a triangle in CSS, but how would I make it stand out since this is on a white background. The normal CSS triangle trick doesn’t work with box-shadow since it’s comprised of borders. So I had to figure out how to fake” a shadow.

Solution, CSS pseudo elements to the rescue. In the CodePen below you can see the result. The technique of creating fake shadow on the CSS Triange is actually pretty simple. Basically I create one triangle using the before pseudo element. For the after pseudo elemnt I create another triangle that will be my shadow. Then coloring the shadow triangle with a light gray, layering it under my before element (white triangle), and moving it up two pixels heighter then the white triangle.

See the Pen VYrmmM by Adam (@adamjacob) on CodePen.

It’s pretty easy to achieve this effect. It’s just a single div and a bit of CSS.

<div class="menu">Cool Menu</div>
.menu {
  position:absolute;
  height:100px; width:150px;
  background-color:#FFF;
  box-shadow:rgba(0,0,0, 0.2) 0px 1px 3px;
  border-radius:5px;
}
.menu:before {
  position:absolute;
  top:-10px; right:10px;
  content: '';
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid white;
  z-index:2;
}
.menu:after {
  /* This is the shadow triangle */
  position:absolute;
  top:-12px; right:8px;
  content: '';
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid rgba(0,0,0, 0.03);
  z-index:1;
}