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

Question

我正在尝试找出如何最好地用 angular 形状遮盖 div，如果在这种情况下顶部 div 将是背景图像, 两个 divs 都是 100% 宽度:

我看过很多关于如何用圆形遮盖图像的教程，但是 none 关于如何遮盖 div 的边界（如红色区域）的教程。我知道肯定有比使用位图更好的方法，但我不知所措。

用 clip-path 还是 SVG 最好？如果结果是他们看到 red/blue div 用一条平线分隔，我并不是很关心旧浏览器。整个红色区域将作为背景图像，因此如果旧（呃）浏览器错过了 angular 边框，那就这样吧。

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

Answer 2

如果您计划使用状态为 "candidate recomendation" 的 clip-path property, you should note that browser support is very low at the moment as the 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>

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

Mask image with a triangle at the bottom

css

mask

css-shapes

clip-path