title: CSS create a box-shadow in diagonal
body: <p>sorry for the weird title, I couldn't think of a better way to describe the issue</p>
  
  <p>I've added a before element to my div to cut the side of it and I want to add a shadow over that div, but it looks weird because of the before element:</p>
  
  <p>HTML:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    #equipe1 {
        background: #262626;
        width: 564px;
        height: 121px;
        left: 0;
        top: 57px;
        position: absolute;
        box-shadow: 0 0 4px 0 #0c0c0c;
      }
      #equipe1:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border-top: 130px solid #1a1a1a;
        border-left: 130px solid rgba(0, 0, 0, 0);
        width: 0;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="equipe1"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and here's a JSFiddle showing the issue:
  <a href="http://jsfiddle.net/73t6uak0/" rel="nofollow">http://jsfiddle.net/73t6uak0/</a></p>
  
  <p>is there any way I could fix this to make the box-shadow go around the div or add an inset shadow to the before element?</p>