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

我试图弄清楚如何最好地屏蔽具有角形状的div,如果在这种情况下顶部div将是背景图像,并且两个div都是100％宽度：

我已经看过很多关于如何用圆形图像掩盖图像的教程,但没有关于如何掩盖像红色区域这样的div边框的教程.我知道必须有比使用位图更好的方法,但我不知所措.

使用clip-path或SVG最好这样做吗？我不是那么担心旧浏览器,如果结果是他们看到红色/蓝色div用平线分开.整个红色区域将是一个背景图像,所以如果旧的(呃)浏览器错过了那个角度边界,那就这样吧.

您可以使用变换(倾斜和旋转)来实现此效果,而无需使用具有低支撑的剪辑路径

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