title: Internet Explorer and clip-path
body: <p>As far as I'm aware clip-path should work in IE, as demonstrated in many articles and this tutorial <a href="http://www.html5rocks.com/en/tutorials/masking/adobe/?redirect_from_locale=fr" rel="noreferrer">CSS Masking</a></p>
  
  <p>However I can't get the below to run properly on IE, but it works fine on Chrome.</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>.container {
    position: relative;
    width: 240px;
    height: 500px;
    left: 50%;
    top: 50%;
  }
  
  .pentagon {
    -webkit-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
    -o-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
    -ms-clip-path: polygon(0px 0px, 100px 0px, 112px 13px, 240px 13px, 240px 250px, -250px 250px);
    float: left;
  }
  
  .avatar {
    margin-top: 50px;
  }
  
  html {
    text-align: center;
    min-height: 100%;
    background: linear-gradient(white, #ddd);
  }
  
  h1,
  p {
    color: rgba(0, 0, 0, .3);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="avatar"&gt;
      &lt;img class="pentagon" src="http://25.media.tumblr.com/tumblr_m5nre6cxkQ1qbs7p5o1_r1_500.jpg" alt="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;svg&gt;
    &lt;defs&gt;
      &lt;clipPath id="pentagon" clipPathUnits="objectBoundingBox"&gt;
        &lt;polygon points=".5,0 1,.30 .2,1 .2,1 0,.30" /&gt;
      &lt;/clipPath&gt;
    &lt;/defs&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>