【问题标题】: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;
}
<div class="masked"></div>

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

【讨论】:

  • 这是一个了不起的解决方案。这正是我所追求的并且非常有用,我可以将它与我正在使用的 SCSS 集成。非常感谢!
  • 同样出于好奇,这两个三角形是如何使用这种方法制作的?我的意思是,如何创建一个三角形,然后如何将其复制为显示 2?
  • 这是一个poligon。您为它指定每个点(xy)。我个人使用clippy 来开始任何形状,而不仅仅是根据我的需要修改点。在您的情况下,我使用了pxcalc(),因为我希望三角形不缩放。如果我使用%,它们会缩放。
猜你喜欢
  • 2014-08-29
  • 1970-01-01
  • 2020-02-27
  • 1970-01-01
  • 2013-07-16
  • 2014-12-11
  • 2014-02-21
  • 1970-01-01
  • 2019-11-12
相关资源
最近更新 更多