title: CSS Drop Shadow for CSS drawn arrow
body: <p>I want the arrow that appears when a div is hovered <a href="http://bfcards.edicypages.com/list-of-cards/abyssal-warder-fire" rel="nofollow noreferrer">here</a> to also drop a shadow. The arrow is drawn from CSS:</p>
  
  <pre><code>.arrow {
  position:absolute;
  margin-top:-50px;
  left:80px;
  border-color: transparent transparent transparent #ccff66;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
  z-index:3;
  _border-left-color: pink;
  _border-bottom-color: pink;
  _border-top-color: pink;
  _filter: chroma(color=pink);
  }
  </code></pre>
  
  <p>The shadow setting I want to apply is:</p>
  
  <pre><code>-moz-box-shadow: 1px 0px 5px #888;
  -webkit-box-shadow: 1px 0px 5px #888;
  box-shadow: 1px 0px 5px #888;
  -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888')";
  filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=0, Color='#888888');
  </code></pre>
  
  <p>The problem in just pasting the shadow setting into the arrow is that the shadow applies to the entire span box and results in a box shadow instead of an drop shadow for the arrow. </p>
  
  <p>P.S. I want to try as much as possible to not use <a href="http://code.google.com/p/explorercanvas/" rel="nofollow noreferrer">explorercanvas</a>, since I'm trying to minimize script tags in the html. However, if its a must please do provide the code.</p>