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