灵活的CSS三角形？

Question

我想补充的三角形到块的侧面塑造成一个箭头,像这样.但它需要灵活并适应不同长度的文本.我认为传统的css-triangle-from-borders技术不会起作用,但这就是我迄今为止所做的一切(演示).还有其他人有更强大的解决方案吗？

尖端的css很好,只要它很好地降解.

Answer 1

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

它仅使用伪元素和CSS transform小号(因此它可以在IE9中,它可以适用于IE8,其中伪元素可以使用歪斜矩阵filter -我从来没有检查这是否实际工作？我只知道渐变过滤器不适用于伪元素).

这个想法很简单:使用两个伪元素,每个都有一半height,绝对是position它们,一个占据上半部分,另一个占据下半部分,最后skew是相反的方向.

HTML:

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

只使用CSS就可以在没有伪元素的情况下完成gradients.不幸的是,IE9不支持它们.