title: How to make transparent corners of borders for a perspective effect?
body: <p>As I'm making a new design for an existing website, I have to draw some elements in "perspective".</p>
  
  <p>By using some <code>:before</code> and <code>:after</code> pseudo-elements, it was easy to make it, but the corners added are in a fixed color (white) wich is ok with the background (white) but not with some other elements (pictures, other bg color blocks). Unfortunatly <a href="http://www.w3.org/TR/css3-content/#nesting" rel="nofollow noreferrer"><code>:outside</code>, <code>:before(2)</code> and  <code>:after(2)</code></a> doesn't seem to work.</p>
  
  <p><img src="https://i.stack.imgur.com/S3i76.jpg" alt="Demo of the white corners"></p>
  
  <p>So how could I make the following menu in <code>CSS</code> with transparent corners (without gif, png or adding some <code>span</code>) ?</p>
  
  <p><strong><a href="http://jsfiddle.net/9MuSP/3/" rel="nofollow noreferrer">> Fiddle demo</a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="relief"&gt;Some content&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.relief {
  position:relative;
  border-left:10px solid #CCC;
  border-bottom:10px solid #CCC;
  border-right:1px solid #CCC;
  border-top:1px solid #CCC;
  padding:10px;
  background:#EDEDED;}
  
  .relief:before, .relief:after {
  content:"";
  border:10px solid transparent;
  position:absolute;
  display:block;
  z-index:10;}
  
  .relief:before {
  left:-10px;
  top:-10px;
  border-left:10px solid #FFF;
  border-top:10px solid #FFF;}
  
  .relief:after {
  right:-10px;bottom:-10px;
  border-right:10px solid #FFF;
  border-bottom:10px solid #FFF;}
  </code></pre>
  
  <p>The best I made for it with another system, made a bottom-left transparent corner and a top-left white border, that I don't want to be displayed : <strong><a href="http://jsfiddle.net/9MuSP/4/" rel="nofollow noreferrer">2nd fiddle demo</a></strong></p>
  
  <p>Any help will be appreciated.</p>