Mask image with a triangle at the bottom

北城以北 提交于 2019-12-21 05:47:15

问题


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:

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.

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.


回答1:


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>

For background images, you should apply top:50% on both the pseudo-elements

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



回答2:


If you plan on using the clip-path property, you should note that browser support is very low at the moment as the CSS Masking Module Level 1 has the status of "candidate recomendation".

Therefore, you can make this shape pretty easily with this property using the polygon() value :

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


来源:https://stackoverflow.com/questions/36478473/mask-image-with-a-triangle-at-the-bottom

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!