title: CSS: Striped diamond
body: <p>I can do a diamond, and I can do stripes with CSS. I'm having issues merging the two to get a striped diamond. Please see <a href="http://jsfiddle.net/r3PNs/">my fiddle</a> (works on Chrome).</p>
  
  <p>How can I make a striped diamond?</p>
  
  <pre><code>#diamond {
    width: 0;
    height: 0;
    border: 80px solid transparent;
    border-bottom: 40px solid red;
    position: relative;
    top: -80px
  }
  #diamond:after {
    content:'';
    position: absolute;
    left: -80px;
    top: 40px;
    width: 0;
    height: 0;
    border: 80px solid transparent;
    border-top: 40px solid red;
  }
  
  .stripes {
    height: 80px;
    width: 160px;
    background-size: 4px;
    background-color: red;
    background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent));
  }
  </code></pre>