CSS3三角形/切出边框 [英] CSS3 Triangle/cut-out Border

问题描述

我想知道是否有一个简单的方式来做类似下面的使用CSS3，我想避免使用图像和绝对定位或类似，并希望使用一些CSS方法来实现这一点。

I'm wondering if there's an "easy" way to do something like below using CSS3, I want to avoid using images and absolute positioning, or similar, and would prefer to use some CSS method to achieve this.

我也想避免使用这种风格的固定高度，因为我会在各种尺寸和颜色不同的元素上使用相同的风格。

I would also like to avoid using any fixed heights for this style too, since I'll be using the same style on various elements that all vary in size and colour.

推荐答案

您可以在CSS中使用简单的剪辑路径：

You can use a simple clip-path in the CSS:

clip-path:polygon(0 0, 100% 0, 95% 50%, 100% 100%, 0 100%, 5% 50%);

结果（在Chrome中）：

Result (in Chrome):

在线示范

但是请注意，所有浏览器的支持还不是很好。目前，它不能在FF中工作我可以告诉（我相信你可以使用SVG替代FF）。

But be aware of that the support isn't that great yet for all browsers. Currently it does not work in FF as far as I can tell (I believe you can use SVG for FF instead).

更新

好吧，在使用SVG（我不是SVG专家）后，我想出了一个在FF中工作的原型：

Ok, after playing around with SVG (I'm no expert on SVG) I came up with a "prototype" that works in FF:

<!-- For firefox -->
<svg class="svg-graphic" width="250" height="36" viewBox="0 0 250 36" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <clipPath id="mask">
        <polygon points="0, 0, 250, 0, 235, 18, 248, 35, 1, 35, 15, 18" />
    </clipPath>
</svg>

然后在CSS中将其ID设置为剪切路径：

Then set its ID as clipping path in CSS:

clip-path:url(#mask);

它会在Firefox中生成：

And it will produce this in Firefox:

使用此代码）

这篇关于CSS3三角形/切出边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！