<分区>
我一直在尝试在我的网站上添加一个三 Angular 形切口。我现在已经在 CSS 中创建了一个三 Angular 形，但我希望它成为一个“ mask ”并显示图案背景。这是我目前的设计。
我已经尝试了很多不同的方法，例如切掉那部分 div 的内联 SVG，但是它们似乎无法正确缩放。当屏幕尺寸缩小时，我希望直 Angular 三 Angular 形与框一起移动，而不是按比例缩放，如下所示:当前设计，浏览器宽度减小。
我也尝试过使用没有溢出的 :before 和 :after 元素来获得效果，但是我无法创建 2 个三 Angular 形(右上角和左下角)。
可能有一种非常简单的方法可以做到这一点，但我错过了...任何帮助将不胜感激!
最佳答案
应该这样做:
.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 的值并点击 Run 你会看到变化。
要获取 CSS，您需要右键单击 => 检查并获取检查器应用的代码。
关于html - SVG/CSS 三 Angular 形抠图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47209213/