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.

回答1:

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!

回答2:

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>

回答3:

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;
}

来源：https://stackoverflow.com/questions/24023113/how-do-you-style-triangular-mask-in-css

标签

css

background

geometry

diagonal