底部带有三角形的蒙版图像

Posted 2023-03-23

【中文标题】底部带有三角形的蒙版图像

【英文标题】：Mask image with a triangle at the bottom

【发布时间】：2016-07-28 11:17:00

【问题描述】：

我试图弄清楚如何最好地用这样的角度形状来掩盖 div —— 如果在这种情况下顶部 div 将是背景图像，并且两个 div 都是 100% 宽度：

我已经看过很多关于如何用圆形遮罩图像的教程，但没有关于如何遮罩像红色区域这样的 div 边框的教程。我知道一定有比使用位图更好的方法，但我不知所措。

最好使用剪辑路径或 SVG 来执行此操作？如果结果是他们看到红色/蓝色 div 用一条平线分隔，我并不是那么关心旧浏览器。整个红色区域将是背景图像，因此如果旧（er）浏览器错过了那个角边框，那就这样吧。

【参考方案1】：

你可以使用transform（skew和rotate）来实现这个效果，而不需要使用支持度较低的clip-path

.container 
  width: 500px;
  height: 300px;
  background: linear-gradient(lightblue, dodgerblue);
  position: relative;
  overflow:hidden;


.container:after
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  left:-50%;
  top:-50%;
  background:#D0021B;
  transform-origin: 0 100%; 
  transform:skewY(15deg);


.container:before
  position:absolute;
  content:"";
  width:100%;
  height:100%;
  left:50%;
  top:-50%;
  background:#D0021B;
  transform-origin: 100% 0; 
  transform:skewY(-15deg);

<div class="container"></div>

对于背景图片，您应该在pseudo-elements 上都应用top:50%

.container 
  width: 500px;
  height: 300px;
  background: url("http://i.imgur.com/5NK0H1e.jpg");
  position: relative;
  overflow: hidden;

.container:after 
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: -50%;
  top: 50%;
  background: linear-gradient(lightblue,dodgerblue);
  transform: skew(10deg) rotate(10deg);

.container:before 
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  background:linear-gradient(lightblue,dodgerblue);
  transform: skew(-10deg) rotate(-10deg);

<div class="container"></div>

【讨论】：

这太棒了，虽然它似乎会限制我在红色区域使用背景图像。我将编辑原始帖子以使其清楚。谢谢你——想知道是否有使用背景图片的解决方案？

我真的很感谢这个答案——很抱歉在我的原始帖子中没有更清楚。对于我不使用背景图像的其他部分，这很高兴知道。谢谢！

@hudsonian 编辑了我的答案，现在你也可以应用背景图片了

啊——这确实有效，并且可能比使用多边形有更多的浏览器支持？你知道这种方法有什么缺点吗？我正在尝试以 100% 的宽度进行响应式设计，它看起来效果很好。再次感谢！

不客气@hudsonian 的缺点，如果你发现任何东西，我知道这里没有任何评论

【参考方案2】：

如果您打算使用clip-path 属性，则应注意browser support 目前处于非常低的水平，因为CSS Masking Module Level 1 处于“候选推荐”状态。

因此，您可以使用 polygon() 值通过此属性轻松制作此形状：

.wrap 
  width: 30%;
  height: 300px;
  background: #4A90E2;

.wrap div 
  height: 200px;
  -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
          clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
  background: url('http://i.imgur.com/5NK0H1e.jpg');
  background-size:cover;

<div class="wrap"><div></div></div>