是否有 SVG 方法可以在 DIV 上做斜角？

Question

我一直在尝试找到一种方法来为 div 元素提供一致的斜边。想想太空堡垒卡拉狄加中的纸——见下图，我圈出了我所说的斜角。为了进行更多设置，这些块 div 元素可以是不同的大小，并且可以随内容动态扩展/收缩。即使他们这样做了，我也希望斜角保持一致的大小（只要有足够的斜角空间）

基本上我需要圆角 CSS 边框半径属性的方形版本

我尝试了包括 Jquery Corner Plugin 在内的方法（似乎不再有效，需要维护，并且从文档中只能使用对我不起作用的纯色背景颜色），Old school DIV 生成（下面缺乏透明度，所以会破坏效果） ，以及其他多种方法。

显然，有一个 CSS 功能草案正在等待添加边框角形状，这正是我想要的，https://www.hongkiat.com/blog/css3-border-shape/ 但它没有被批准。从 Medium 上的一篇文章来看，此功能可能不是因为缺乏需要此功能的开发人员。 （+1 我对添加此内容的投票，我该乞求谁？）

所以，我开始思考，似乎这可能使用 SVG。然而，虽然我可以看到 SVG 是构建正确形状的解决方案，但我完全不知道如何做到这一点，并且一些糟糕的尝试以 SVG 的混乱而告终。坦率地说，我什至不知道这是否可以使用，因为 div 将是不同的形状。免责声明，我不是前端 Web 开发人员，而是从事一个需要我涉足的个人项目。所以我想我会问专家。

是否有人为此创建了 SVG 解决方案，而我只是在我挖掘的 20 多页搜索结果中没有看到它？这看起来可能吗？如果可能但还没有完成，人们会怎么做呢？斜角有更好的解决方案吗？我忽略了一个更简单的选项吗？

Answer 1

您可以使用 CSS Clip Path 属性基本上将任何 div（或任何元素）剪辑成您需要的任何形状。请参阅我在下面展示的示例：

注意： Clip Path 不关心边框本身，它只是将整个元素切割成指定的形状。因此，您需要确保添加足够的填充，以免内容被截断。

此外，如果您希望被剪裁的 div 在 DOM 中也具有斜面形状（不仅仅是视觉上的，而是实际的形状），您可以使用 CSS shape-outside 属性。

这里是剪辑路径的官方 MDN 文档：CSS Clip Path

.bevelled{
background-color:red;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 300px;
height: 150px;
}

.bevelled-borders{
background-color:cyan;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
width: 300px;
height: 150px;
border: 5px solid #000;
}

<div class="bevelled"></div>
<br/>
<div class="bevelled-borders"></div>