CSS Inverted Triangle image overlay [duplicate]

Question

Is it possible to make something like that in CSS? I want an image for the header, but I want that triangle cut out of the next section so the image above shows there.

I know how to make a solid CSS triangle with borders (something like this for example: http://www.dailycoding.com/Posts/purely_css_callouts.aspx), but in this case I either need to do the opposite (take a "chunk" out of the blue part), or make the triangle an image that somehow lines up exactly with the image it is connected to. I'm thinking if I can take a "chunk" out, that might be easier

To make it a little more complicated, I also have the image above set to background-attachment: fixed and background-size: cover. So the image scales as the browser size is made larger.

If I can't do it with CSS alone and need an image, how can I make the right combinations of images to keep the triangle in line with the text if the text is centered horizontally on the page? I'm thinking something like this with two long div's that extend into the margins, and one exact width image in the middle with the triangle transparent:

_____________________________  ___ ______________________  _________________________
|    (really wide for margin)||   V (960px wide image)   || (really wide box again) |

But can it be done with just CSS? Or is there perhaps an SVG solution (I'm not as familiar with SVG)? I'm okay with a solution that only works in modern browsers as this is definitely just "progressive enhancement".

Answer 1

Here's a twist on the triangles-from-borders concept.

• Basic: http://jsfiddle.net/nhqKb/
• More Detailed: http://jsfiddle.net/nhqKb/3/

HTML

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
</div>

CSS

#container{
    height: 300px;
    background-color: red;
    position: relative;
}

#one {
    position: absolute;
    width: 100px;
    left: 0;
    bottom: 0;
    border-bottom: 20px solid green;
    border-right: 20px solid transparent;
}

#two {
    position: absolute;
    left: 120px;
    bottom: 0;
    right: 0;
    border-bottom: 20px solid green;
    border-left: 20px solid transparent;
}

An alternative: I've done something similar with CSS transforms (specifically, skew). See CSS (3) & HTML Cut edge.

Answer 2

You can do it without much extra markup at all using ::before and ::after. You just need overflow: hidden on the container.

Given

<div class="hero">
  <img src="http://farm3.staticflickr.com/2431/3875936992_348d6dd86b_b.jpg" alt=""/>
</div>

The CSS would be

.hero {
    position: relative;
    overflow: hidden;
}
.hero img {
    display: block;
    width: 960px;
    height: auto;
}
.hero::before {
    content: "\00A0";
    display: block;
    border: 960px solid #fff; /* the width of the image */
    border-top-width: 0;
    border-bottom-width: 0;
    height: 30px; /* 1/2 the triangle width */
    width: 60px; /* the triangle width */
    position: absolute;
    bottom: 0;
    left: -630px; /* the left offset - the image width */
}
.hero::after {
    content: "\00A0";
    display: block;
    border: 30px solid #fff; /* 1/2 the triangle width */
    border-top: 30px solid transparent; /* 1/2 the triangle width */
    border-bottom-width: 0;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 330px; /* the left offset */
}

Live example: http://codepen.io/aarongustafson/full/nutDB