title: CSS Inverted Triangle image overlay
body: <p><img src="https://i.stack.imgur.com/coJuu.jpg" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>I know how to make a solid CSS triangle with borders (something like this for example: <a href="http://www.dailycoding.com/Posts/purely_css_callouts.aspx">http://www.dailycoding.com/Posts/purely_css_callouts.aspx</a>), 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</p>
  
  <p>To make it a little more complicated, I also have the image above set to <code>background-attachment: fixed</code> and <code>background-size: cover</code>. So the image scales as the browser size is made larger.</p>
  
  <p>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 <code>div</code>'s that extend into the margins, and one exact width image in the middle with the triangle transparent:</p>
  
  <pre><code>_____________________________  ___ ______________________  _________________________
  |    (really wide for margin)||   V (960px wide image)   || (really wide box again) |
  </code></pre>
  
  <p>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".</p>