Winner

http://youtu.be/k1tsGGz-Qw0

I was at the exact point you were and pushed a little further. I've been going at it for 8 hours now and it's 7:39 AM here. (Thanks OP!)

I think I've arrived at the simplest possible execution with verbatim design, plus it avoids setting a fixed height on the button which is not always ideal, especially when dealing with vertical rythm.

http://codepen.io/bamf/pen/gbgGdx

The trick is that you can actually set the pseudo elements height automatically by using:

height:calc((100% + 6px) / 1.41421356);

6px is the loss from border-radius. (I'm pretty sure there is a formula here that determines how many pixels are lost diagonally but I'm too exhausted for that so magic number it is!)

1.41421356 is √2 from the pythagoras formula.

BUT

There is no frakkin way to in hell/CSS to set a width on an element based on it's height. You can do the other way around but not this.

Hence the need for another magic number. The good news is that you don't need to calculate anything. Just make your changes in the design, grab the calculated value for height and put it in as the width.

Admittedly, it's not that easier than setting a variable right upfront, however it seemed a bit better handling rounding issues.

Edit: I tested around some more there are some differences on how calc is rounded between browsers. Looks like my method is busted because of it.

This is the problem with making arrows with just CSS. The edges are always wonky, especially noticeable in Firefox.

http://f.cl.ly/items/1v3w1T3d3J02272X1s2w/Screen%20Shot%202015-01-09%20at%2010.50.28%20AM.png

Make it a little better by adding background:inherit; to your pseudoelements

kinda gets odd cuts on retina screens though

that's excellent. it misses one border radius but looks pretty neat.

I'd love to see an inline SVG example!

Ha. Good try!