用底部的三角形掩蔽图像 [英] Mask image with a triangle at the bottom

问题描述

我想弄清楚如何最好地掩盖一个带有角形状的div，如果在这种情况下顶部的div将是一个背景图像，两个div将是100％的宽度：

I'm trying to figure out how to best mask a div with an angular shape like so--if the top div in this case will be a background image, and both divs would be 100% width:

我看过很多教程有关如何屏蔽带有圆形形状的图像，但没有关于如何屏蔽像红色区域的div的边框。我知道必须有一个更好的方法比这样做的位图，但我的损失。

I've seen lots of tutorials out there on how to mask an image with a circle shape, but none on how you would mask the border of a div like the red area. I know there must be a better way than doing this with bitmaps, but am at a loss.

最好使用clip-path或SVG吗？我不是所有关心旧的浏览器，如果结果是他们看到红色/蓝色divs用一条扁线分隔。

Would it be best to do this with clip-path or SVG? I'm not all that concerned about older browsers, if the result is that they see the red/blue divs separated with a flat line. The entire red area will be a background image, so if old(er) browsers miss out on that angular border, so be it.

推荐答案

这是一个非常复杂的问题，

您可以使用 transform （ skew 和 rotate ）来实现此效果，而不使用支持低的 clip-path

You can use transform (skew and rotate) to achieve this effect without the use of clip-path which has low support

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

背景图片，您应该在伪元素

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

这篇关于用底部的三角形掩蔽图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！