Flexible CSS triangles?

Question

I want to add triangles to the sides of the block to form it into an arrow like this . But it must be flexible and adapt to different lengths of text. I think that the traditional css-triangles-made-from-border technique will not work, but all that I have so far ( demo ). Does anyone else have a more reliable solution?

Cutting css is perfect as long as it gets worse.

Answer 1

I think the best compatibility solution would be http://dabblet.com/gist/3184227

It uses only pseudo-elements and CSS transform s (therefore it works in IE9, and it can be adapted to IE8, where pseudo-elements can be distorted using the filter matrix - I never checked if this really works ... I only know that gradient filters do not work on pseudo-elements).

The idea is very simple: use two pseudo-elements, each of which has half height , absolutely position them, one occupies the upper half, and the second - the bottom and finally skew them in the opposite direction.

HTML:

 <div class="t"> <p>Add text to see how it scales</p> </div> 

Matching CSS:

 .t { position: relative; } .t:before, .t:after { left: 0; right: 0; position: absolute; z-index: -1; content: ''; } .t:before { top: 0; bottom: 50%; transform: skewX(10deg); } .t:after { top: 50%; bottom: 0; transform: skewX(-10deg); } 

This can be done without pseudo-elements using only CSS gradients . Unfortunately, IE9 does not support them .