title: Flexible CSS triangles?
body: <p>I want to add triangles onto the sides of a block to shape it into an arrow <a href="http://i.imgur.com/Fp10B.png" rel="nofollow">like so</a>. But it needs to be flexible and adapt to different lengths of text. I'm thinking that the traditional css-triangles-made-from-borders technique isn't going to work, but that's all I've got so far (<a href="http://jsfiddle.net/C8TSa/" rel="nofollow">demo</a>). Does anyone else have a more robust solution? </p>
  
  <p>Cutting-edge css is fine as long as it degrades nicely.</p>