title: "Chevron"-like effect on images and boxes
body: <p>I tried to create a chevron like mask for images which should look like this, kind of: <a href="https://jsfiddle.net/w0rtLz2h/2/" rel="nofollow noreferrer">https://jsfiddle.net/w0rtLz2h/2/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.clip {
    position: relative;
  }
  
  .clip img {
    width: 100%;
  }
  
  .clip:before,
  .clip:after {
    content: " ";
    display: block;
    width: 50%;
    height: 15%;
    position: absolute;
    bottom: 4px;
  }
  
  .clip:before {
    background: -webkit-linear-gradient(top right, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
    background: -moz-linear-gradient(top right, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
    background: -o-linear-gradient(top right, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
    background: linear-gradient(to bottom left, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
    left: 0;
  }
  
  .clip:after {
    background: -webkit-linear-gradient(top left, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
    background: -moz-linear-gradient(top left, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
    background: -o-linear-gradient(top left, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
    background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #F3F5F6 50%, #F3F5F6 100%);
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="clip"&gt;
    &lt;img src="http://hotelislandstargroups.com/wp-content/uploads/2014/04/img4-960x420.jpg" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have to make it work for all modern browsers + IE 9, 10, 11 ...</p>
  
  <p>I already tried with CSS triangles (via border instead of gradient) but the problem with that was that you can't apply a width of 50%.</p>
  
  <p>Another attempt was to do it with an SVG <code>clipPath</code>: <a href="https://jsfiddle.net/ofnrhq2e/" rel="nofollow noreferrer">https://jsfiddle.net/ofnrhq2e/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg style="display: block;" viewBox="0 0 960 500" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1"&gt;
    &lt;g&gt;
      &lt;clipPath id="svg-mask-header"&gt;
        &lt;polygon points="0 380,480 500,960 380,960 0,0 0" /&gt;
      &lt;/clipPath&gt;
    &lt;/g&gt; 
    &lt;image clip-path="url(#svg-mask-header)" height="100%" width="100%" xlink:href="http://nfornour.com/wp-content/uploads/2015/11/960x500-beirut-3.jpg" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With that one, IE is not fitting the <code>height</code> of the image, but the <code>width</code>, so it's warped.</p>