我想在块的两侧添加三角形，将其整形为箭头like so。但它需要灵活并适应不同长度的文本。我认为传统的css-triangle-from-borders技术不会起作用，但这就是我到目前为止所做的一切（demo）。还有其他人有更强大的解决方案吗？
只要它很好地降解，尖端的css就可以了。
答案 0 :(得分：5)
我认为最佳兼容性解决方案是http://dabblet.com/gist/3184227
它只使用伪元素和CSS transforms（因此它适用于IE9，它可能适用于IE8，其中伪元素可能使用matrix filter倾斜 - 我从来没有检查它是否真的有用......我只知道渐变滤镜不适用于伪元素。）
这个想法非常简单：使用两个伪元素，每个元素都有height的一半，绝对是position个，一个占据上半部分，另一个占据下半部分，最后{{ 1}}他们在相反的方向。
HTML：
skew相关CSS：
<div class="t">
<p>Add text to see how it scales</p>
</div>
只使用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);
}
就可以在没有伪元素的情况下完成。不幸的是，IE9 does not support them。