SVG / CSS Triangle Cutout

Question

我一直试图在我的网站上添加三角形剪裁。我现在已经在CSS中创建了一个三角形，但是我希望这是一个“面具”＃39;并显示图案背景。这是我目前的设计。

我尝试了很多不同的方法，例如内联SVG可以删除div的那一部分，但它们似乎无法正确缩放。当屏幕尺寸减小时，我希望直角三角形与盒子一起移动而不是缩放尺寸，如下所示：当前设计，浏览器宽度减小。

我还尝试使用：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，您需要右键单击=＆gt;检查并从检查员处获取代码。