title: Css arrow with drop shadow
body: <p>Please consider the following fiddle. I am trying to create an arrow at the bottom of the callout which has a drop shadow. This is working:</p>
  
  <p><a href="http://jsfiddle.net/tmcconechy/vT4rj/" rel="nofollow">http://jsfiddle.net/tmcconechy/vT4rj/</a></p>
  
  <p>However, If i want to move the dialog around by setting the root's left/top/width.</p>
  
  <pre><code>left: 9px;
  position: absolute;
  top: 36px;
  </code></pre>
  
  <p>Then the :after arrow is out of position. The way i can see to handle this is set the after: element to <code>position: relative;top: 100%</code>. However, as soon as i do that the shape arrow is broken? </p>
  
  <p>Is there anyway i can handle this so the arrow position is relative to the box size and position?</p>