灵活的CSS三角形？

Question

我想将三角形​​添加到块的两侧以将其塑造成箭头like so。但它需要灵活并适应不同长度的文本。我在想，传统的css-triangles-made-from-borders技术是行不通的，但这就是我到目前为止（demo）。其他人是否有更强大的解决方案？

尖端的CSS是好的，只要它很好地降解。

Answer 1

我认为最好的兼容性的解决办法是http://dabblet.com/gist/3184227

它仅使用伪元素和CSS transforms（因此它可以在IE9中，它可以适用于IE8，其中伪元素可以使用被扭曲matrix filter - 我从来没有检查过这是否真的有效......我只知道渐变过滤器不适用于伪元素）。

的想法是非常简单的：使用两个伪元素，每一个都具有height，绝对position它们，一个采取半起来以相反的方向的上半部分，而另一个下半部最后skew它们。

HTML：

​​

相关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); 
} 

它可以在不伪元素来完成，只用CSS gradients。不幸的是，IE9 does not support them。