SVG/CSS 三角形镂空

Question

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

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

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

可能有一个非常简单的方法来做到这一点，我想念...任何帮助将不胜感激！

Answer 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;
}

<div class="masked"></div>

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

SVG/CSS 三角形镂空

SVG/CSS Triangle Cutout

html

css

svg

clip-path