灵活的CSS三角形？ [英] Flexible CSS triangles?

问题描述

我要将三角形添加到块的两侧，以将其成形为箭头如此。但它需要灵活和适应不同长度的文本。我认为传统的css三角形从边界技术不会工作，但这就是我到目前为止（ demo ）。其他人有更强大的解决方案吗？

I want to add triangles onto the sides of a block to shape it into an arrow like so. But it needs to be flexible and adapt to different lengths of text. I'm thinking that the traditional css-triangles-made-from-borders technique isn't going to work, but that's all I've got so far (demo). Does anyone else have a more robust solution?

前沿css是好的，只要它能很好地降解。

Cutting-edge css is fine as long as it degrades nicely.

推荐答案

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

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

它仅使用伪元素和CSS transform s （因此它适用于IE9，它可能适用于IE8，其中伪元素可能会使用< a href =http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx =nofollow> matrix 过滤器 - 我从来没有检查过是否真的有效...我只知道渐变过滤器不工作的伪元素）。

It uses just pseudo-elements and CSS transforms (so it works in IE9 and it may be adapted to IE8, where the pseudo-elements could be skewed using a matrix filter - I've never checked whether that actually works... I only know that gradient filters don't work on pseudo-elements).

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

The idea is really simple: use two pseudo-elements, each having half the height, absolutely position them, one taking up the upper half and the other one the lower half and finally skew them in opposite directions.

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不支持。

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

这篇关于灵活的CSS三角形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！