1

我想在块的侧面添加三角形，将其塑造成这样的箭头。但它需要灵活并适应不同长度的文本。我认为传统的 css-triangles-made-from-borders 技术行不通，但这就是我到目前为止所拥有的一切（演示）。还有其他人有更强大的解决方案吗？

只要能很好地降解，尖端的 css 就很好。

4

1 回答 1

5

我认为最好的兼容性解决方案是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 不支持它们。

于 2012-07-26T20:11:09.913 回答