title: CSS triangles cut out
body: <p>I have a box with a triangle that intersects it and I'd like a similar triangle to be cut out from the box so there is a white gap between the two.  As this is a little hard to explain I created a <a href="http://jsfiddle.net/XDumc/1/" rel="nofollow noreferrer">jsFiddle here</a> that shows what I have already.  </p>
  
  <p>Here is a screenshot</p>
  
  <p><img src="https://i.stack.imgur.com/0KQfh.png" alt="CSS Triangles"></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="alertdetails"&gt;
      &lt;h2&gt;UH OH&lt;/h2&gt;
      Date: 05/11/2012 15:57:46
  
      &lt;br&gt;&lt;br&gt;
      &lt;a href=""&gt;View&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id="arrow-right"&gt;&lt;/div&gt;
  ​
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#alertdetails {
      background-color: #F8F8F8;
      border: 1px solid #CCCCCC;
      border-radius: 5px 5px 5px 5px;
      left: 25px;
      padding: 20px;
      position: absolute;
      text-shadow: 0 1px #FFFFFF;
      top: 15px;
  }
  
  #arrow-right {
      position: absolute;
      top: 45px;
      left: 15px;
      width: 0; 
      height: 0; 
      border-top: 20px solid transparent;
      border-bottom: 20px solid transparent;
  
      border-left: 20px solid #303030;
  }
  ​
  </code></pre>