title: mask an image on an angle
body: <p>I am making an accordion that is meant to have slanted elements, I have got the accordion functionality working, but I am struggling to create the slanted effect, I have a <a href="http://jsfiddle.net/aMhcY/1/" rel="nofollow">jsfiddle</a></p>
  
  <p>and also here is my code, </p>
  
  <pre><code>&lt;div id="accordion"&gt;
    &lt;div class="set" id="first" data-width="261"&gt;
        &lt;div class="accord"&gt;
          &lt;img src="http://placekitten.com/872/690" /&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="set active" id="second" data-width="106"&gt;
      &lt;div class="accord"&gt;
          &lt;img src="http://placekitten.com/872/690" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="set" id="third" data-width="113"&gt;
      &lt;div class="accord"&gt;
          &lt;img src="http://placekitten.com/872/690" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="set" id="fourth" data-width="71"&gt;
      &lt;div class="accord"&gt;
          &lt;img src="http://placekitten.com/872/690" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="set" id="fifth" data-width="24"&gt;
      &lt;div class="accord"&gt;
          &lt;img src="http://placekitten.com/872/690" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="set" id="sixth" data-width="89"&gt;
      &lt;div class="accord"&gt;
          &lt;img src="http://placekitten.com/872/690" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  
  
  <pre><code>  *, html { padding:0; margin:0; }
      #accordion { white-space:nowrap;background:black; width:2000px; height:690px; }
      .set { white-space:normal; display:inline-block; position:relative; overflow:hidden; }
      .active { width:872px; }
      #first { width:261px; }
      #third { width:113px; }
      #fourth { width:71px; }
      #fifth { width:24px; }
      #sixth { width:89px; }
  
      .set:after {
        width:15px;
        height:15px;
        display:block;
        background:red;
        position:absolute;
        top:0px;
        right:0px;
        content:"";
      }
  
      .set:before { 
         width:1px;
         background:red;
         display:block;
         position:absolute;
         height:100%;
         -webkit-transform:rotate(9deg);
         content: " ";
         top:0px;
         right:68px;
      }
  </code></pre>
  
  
  
  <pre><code>$("#accordion .set").click(function() {
    var active = $(this).parent().find(".active");
    active.animate({"width" : active.data('width')}, 1000);
    active.removeClass("active");
    $(this).animate({"width" : 872}, 1000);
    $(this).addClass("active");
  });
  </code></pre>
  
  <p>What I am trying to do is mask out every that is after the red slanted line, I have so far tried, 'clip'</p>