How do you style triangular mask in CSS?

Question

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

Yes that's my backup solution, but I guess that there is a clean, css option? (I'd like to learn it). :) — antonio1475, Jun 03 '14 at 19:15
you can probably do that with SVG somehow, but i doubt its possible with plain css — MightyPork, Jun 03 '14 at 19:24
Thanks @MightyPork I tend to overestimate the capabilities of CSS and HTML. I will go with an image then. :) — antonio1475, Jun 03 '14 at 19:27
Well you can embed SVG within the page, it works pretty good. But I am not particularly familiar with SVG, tbh. — MightyPork, Jun 03 '14 at 19:28

score 2 · Accepted Answer · answered Jun 03 '14 at 19:58

2

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!

answered Jun 03 '14 at 19:58

oneday

1,599
5
18
29

Thank you! That works exactly as I want. Since there is content below the triangles, I just removed the triangle-holder properties. There is a small horizontal scrolling, which I should be able to fix. Thank you very much sir! – antonio1475 Jun 03 '14 at 20:09
1

I think the small horizontal scrolling can be fixed with giving overflow-x: hidden on the body. Happy to help! – oneday Jun 03 '14 at 20:13
1

@antonio1475 if that ***zigzag*** output can satisfy you, you can try this approach using multi-background feature http://jsfiddle.net/viphalongpro/UfSkS/2/ For a high-quality edges (smooth edges), I think there is only 1 solution using some element to cover the background image, this element should be transformed to create diagonal flats, here is another solution of that approach http://jsfiddle.net/UfSkS/3/ – King King Jun 03 '14 at 20:20

score 1 · Answer 2 · answered Jun 03 '14 at 19:44

1

You'd achieve the same result with a 'background img' with following styling:

#bg{
    position: fixed;
    top: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    z-index:-1;
    -webkit-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    -moz-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    -ms-clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
    clip-path: polygon(
        0 50%, 45% 90%, 100% 50%, 100% 0, 0 0
    );
}

and in html you would add:

<img id = 'bg' src = 'path.jpg'> </img>

answered Jun 03 '14 at 19:44

touko

1,957
1
11
10

Thank you. I see how that works. However, I failed to mention that the page keeps scrolling down. I think your solution sets the "triangles" to the bottom of the page. – antonio1475 Jun 03 '14 at 20:05
won't matter because styling specified position: fixed; http://jsfiddle.net/9qn64/ for example – touko Jun 04 '14 at 13:41

score 0 · Answer 3 · answered Jun 03 '14 at 20:15

I would recommend using html canvas and either a rectangle with a triangle clip region or two inverted right-angle triangles positioned against the bottom edges.

This would require javascript.

Other than that you could use some CSS tricks like this: http://jsfiddle.net/pgLP2/

This would not be very elegant as it would require manual handling positions and dimension.

HTML:

<div class="content">Some Content</div>
<div id="toptriangle"></div>

CSS:

body {
    color: white;
    background-color: #666666;
}

.content {
    text-align: center;
}

#toptriangle {
    position: relative;
    width: 0px;
    height: 0px;
    top: 100px;
    left: -10px;
    border-right: 500px solid white;
    border-top: 300px solid transparent;
    border-left: 500px solid white;
    border-bottom: 400px solid white;
}

How do you style triangular mask in CSS?

3 Answers3

Linked