title: CSS box shadow around triangle
body: <p>I need to create a triangle with a drop shadow using simple html and css.  Answered by another stackoverflow question, I was able to create the triangle with mitered borders.  Basically I create 1 side of a box with a very wide border and the nearby side with a wide transparent border:</p>
  
  <pre><code>div.triangle {
      border-bottom : 60px solid transparent;
      border-left : 60px solid black;
  }
  </code></pre>
  
  <p>works great, but when I try to apply a box-shadow the shadow goes around the enclosing square... not the triangle:</p>
  
  <pre><code>div.triangle {
      border-bottom : 60px solid transparent;
      border-left : 60px solid black;
      -webkit-box-shadow: 0 0 10px black;
  }
  </code></pre>
  
  <p>How do I get a triangle using only css/html with a drop shadow? </p>