在底部用三角形遮罩图像

Question

我正在尝试找出如何最好地掩盖一个带有角形状的div，如下所示 - 如果在这种情况下顶部的div将是背景图像，并且两个div都将是100％宽度：

我看过很多关于如何用圆形形状掩盖图像的教程，但没有关于如何掩盖红色区域边框的内容。我知道一定有比使用位图更好的方法，但我不知道该怎么做。

使用clip-path或SVG会是最好的选择吗？如果旧浏览器只能看到红/蓝div之间的平线分隔，则我并不担心。整个红色区域都将是背景图像，因此如果旧（ER）浏览器错过了那个角形边框，那就这样吧。

- hudsonian

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>

对于背景图片，您应该在伪元素上同时应用 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>

- Akshay

---

这太棒了，尽管似乎会限制我在红色区域使用背景图像。我将编辑原帖以澄清这一点。谢谢你--不知道是否有解决方案，考虑到使用背景图像？ - hudsonian

我非常感激这个答案——抱歉我在原始帖子中表述不够清晰。这对于我没有使用背景图像的其他部分来说是很好的知识。谢谢！ - hudsonian

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

啊，这个方法确实可行，而且可能比使用多边形更受浏览器支持？您是否知道这种方法有什么缺点？我正在尝试将其应用于响应式设计的100％宽度，看起来效果非常好。再次感谢！ - hudsonian

欢迎您 @hudsonian，我不知道有什么缺点。如果您发现任何问题，请在此处评论。 - Akshay

Answer 2

如果您计划使用clip-path属性，则应注意，浏览器支持目前非常低，因为CSS遮罩模块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>

- web-tiki