SVG/CSS 三角形抠图 [重复]答案

【问题标题】：SVG/CSS Triangle Cutout [duplicate]SVG/CSS 三角形抠图 [重复]
【发布时间】：2018-04-22 21:09:54
【问题描述】：

我一直在尝试在我的网站上添加一个三角形切口。我现在已经在 CSS 中创建了一个三角形，但是我希望它是一个“蒙版”并显示图案背景。这是我目前的设计。

我尝试了很多不同的方法，例如一个内联 SVG，它会切掉 div 的那部分，但它们似乎无法正确缩放。当屏幕缩小时，我希望直角三角形与框一起移动，而不是按比例缩放，如下所示：current design with reduction browser width.

我也尝试使用没有溢出的 :before 和 :after 元素来获得效果，但是我无法创建 2 个三角形（右上角和左下角）。

可能有一种非常简单的方法可以做到这一点，但我错过了......任何帮助将不胜感激！

【问题讨论】：

您应该在此处包含一些我们可以使用的标记。那么我很乐意提供帮助。

标签： html css svg clip-path

【解决方案1】：

应该这样做：

.masked {
  -webkit-clip-path: polygon(0 100%, 0 0, calc(100% - 240px) 0, calc(100% - 160px) 90px, calc(100% - 80px) 0, 100% 0, 100% 100%, 240px 100%, 160px calc(100% - 90px), 80px 100%);
  clip-path:polygon(0 100%, 0 0, calc(100% - 240px) 0, calc(100% - 160px) 90px, calc(100% - 80px) 0, 100% 0, 100% 100%, 240px 100%, 160px calc(100% - 90px), 80px 100%);      
  min-height: 80vh;
  margin-top: 10vh;
  background-color: rgba(255,255,255,.84);
}

body {
  background: url(https://source.unsplash.com/random/800x600) no-repeat 50% 50% /cover;
}

&lt;div class="masked"&gt;&lt;/div&gt;

为了更容易改变，我定义了一些变量来控制 SCSS 中点的位置。 SO 还没有 SCSS 实现，但你可以在 jsFiddle 中使用它。
如果您更改 $p1、$p2x、$p2y 和 $p3 的值并点击 Run，您将看到更改。
要获取 CSS，您需要右键单击 => 检查并获取从检查器应用的代码。

【讨论】：

这是一个了不起的解决方案。这正是我所追求的并且非常有用，我可以将它与我正在使用的 SCSS 集成。非常感谢！
同样出于好奇，这两个三角形是如何使用这种方法制作的？我的意思是，如何创建一个三角形，然后如何将其复制为显示 2？
这是一个poligon。您为它指定每个点（x 和 y）。我个人使用clippy 来开始任何形状，而不仅仅是根据我的需要修改点。在您的情况下，我使用了px 和calc()，因为我希望三角形不缩放。如果我使用%，它们会缩放。