SVG Filter Shadows on CSS Images

dabblet.css

/**
 * SVG Filter Shadows on CSS Images
 * See http://dabblet.com/gist/1562718 for my inspiration.
 *  Original by Lea Verou. Just wanted to see the triangles blown out
 *  Top triangle uses the SVG Shadow (notice how it's actually a triangle)
 *  Bottom is current CSS box shadow (notice how it sucks?)
 *
 *  Need Webkit Nightly or Canary Chrome to see.
 */


div {
  content: '';
  margin-top: 25px;
  border: 20px solid transparent;
  border-left-color: #f06;
}

div.triangle-drop {
  -webkit-filter: drop-shadow(3px 3px 5px gray);
}

div.triangle-box {
  box-shadow: 3px 3px 5px gray;

}

dabblet.html

<div class="triangle-drop"></div>

<div class="triangle-box"></div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"css"}