Search code examples
cssbackgroundgeometrydiagonal

How do you style triangular mask in CSS?

I have been looking at how to do this "inverse triangular" background using css. I am referring to the white diagonal parts on the bottom, on top of the background (fixed) image.

The most I've gotten is to shapes, which aren't apparently a good solution having in mind that it is for a responsive design. I don't care if when the window is narrower there is just one diagonal, as long as there is no horizontal scroll. But shapes and its absolute width mess that up.

I apologize if this is a silly/common/often asked thing. I haven't been able to find it, most probably due to lack of technical term. Thank you very much :)

EDIT: The page keeps scrolling down! There is content below the diagonals/triangles. The triangles are not the bottom of the page.

enter image description here

Solution

  • Here's the fiddle with something similar and responsive: http://jsfiddle.net/BLbu5/

    HTML:

    <body>
<div id="triangle-holder">
<div id="triangle-1"></div>
<div id="triangle-2"></div>
</div>
</body>

    CSS:

    body {
background-image: url('http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg');
margin: 0;
padding: 0; 
}

#triangle-1 { 
width: 0; 
height: 0; 
border-bottom: 30vw solid red; 
border-right: 100vw solid transparent;
float: left;
}

#triangle-2 { 
width: 0; 
height: 0; 
border-bottom: 30vw solid red; 
border-left: 100vw solid transparent; 
}

 #triangle-holder {
position: absolute;
bottom: 0;
}

    Read about the technique here: https://css-tricks.com/examples/ShapesOfCSS/

    Hope it works!