title: Creating a rectangle with css and a 'triangle edge'
body: <p>Im trying to create a container with css that has a rectangle header with a 'triangle edge'.</p>
  
  <p>Example:</p>
  
  <p><a href="http://jsfiddle.net/BNVHU/3/" rel="nofollow">chrome example</a></p>
  
  <p>Or code here (css):</p>
  
  <pre><code>.bubble {
      clear: both;
      margin: 0px auto;
      width: 350px;
      background: #fff;
      -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
      -moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);  
      position: relative; 
      z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
  }
  
  div#container {
      margin: 50px auto 0px auto; /* centered */
      padding-top:100px;
      width: 400px;
  }
  
  .triangle {
     height: 35px;
     top: -20px;
     width: 315px;
     position: relative;
     background: #D12738;
     background: -moz-linear-gradient(top, rgba(209, 39, 56, 1) 0%, rgba(122, 23, 38, 1)    100%);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209, 39, 56, 1)), color-stop(100%,rgba(122, 23, 38, 1)));
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12738',  endColorstr='#7a1726',GradientType=0 ), filter:  progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
  }
  
  .triangle::after {
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -webkit-transform: rotate(35deg);
     -o-transform: rotate(45deg);
     background: none repeat scroll 0 0 white;
     content: "";
     height: 44px;
     left: 302px;
     position: absolute;
     top: 2px;
     width: 24px;
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="bubble"&gt;
          &lt;div class="triangle"&gt;test baa&lt;/div&gt;
          &lt;p&gt;sadsadsadsad dsdsa dsdsa ds dsadsd&lt;/p&gt;
          &lt;p&gt;sadsadsadsad dsdsa dsdsa ds dsadsd&lt;/p&gt;
          &lt;p&gt;sadsadsadsad dsdsa dsdsa ds dsadsd&lt;/p&gt;
          &lt;p&gt;sadsadsadsad dsdsa dsdsa ds dsadsd&lt;/p&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the border on the right edge dissapears because of the white background. Is there any way to prevent this?</p>
  
  <p>Any help appreciated!</p>