index.html

<div class="triangle triangle_with_shadow_up"></div>

<div class="triangle triangle_with_shadow_down"></div>

style.sass

@import "compass"
/*
 *	Triangle with Shadow
 */
.triangle
  width: 100px
  height: 100px
  position: relative
  overflow: hidden

.triangle_with_shadow_up
  box-shadow: 0 16px 10px -17px rgba(0, 0, 0, 0.5)
  &:after
    content: ""
    position: absolute
    width: 50px
    height: 50px
    background: #999
    +transform(rotate(45deg))
    top: 75px
    left: 25px
    box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5)
  &:hover
    box-shadow: none
    &:after
      box-shadow: none

.triangle_with_shadow_down
  box-shadow: 0 -16px 10px -17px rgba(0, 0, 0, 0.5)
  &:before
    content: ""
    position: absolute
    width: 50px
    height: 50px
    background: #999
    +transform(rotate(225deg))
    top: -25px
    left: 25px
    box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.5)
  &:hover
    box-shadow: none
    &:before
      box-shadow: none

.triangle_with_shadow_down
  margin-top: 20px