CSS: Striped Diamond

Question

I can make a diamond and I can make stripes with CSS. I'm having trouble combining the two to get a striped diamond. Check out my fiddle (works in Chrome).

How can I make a striped diamond?

#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)); } 

Answer 1

You can do this in just 1 element and less CSS:

demonstration

HTML is just <div class='diamond'></div>

Matching CSS :

 .diamond { overflow: hidden; position: relative; padding: 20%; width: 0; transform: rotate(-30deg) skewX(30deg) scaleY(.866); } .diamond:before { position: absolute; top: 0%; right: -37.5%; bottom: 0; left: -37.5%; transform: scaleY(1.155) skewX(-30deg) rotate(30deg); background: linear-gradient(90deg, crimson 50%, transparent 50%); background-size: 6px; content: '' } 

Answer 2

CSS striped diamond using the code you provided: http://jsfiddle.net/r3PNs/5/

HTML:

 <div id="diamond"></div> <div class="stripes" style=""></div> 

CSS

 #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: transparent; background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, 1)), color-stop(.5, transparent), to(transparent)); position:absolute; top:0; } 

Answer 3

Use borders to create a diamond and background to create stripes. They will not work together. Instead, you can rotate the striped box to get a diamond:

 .stripes { height: 80px; width: 80px; 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)); transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); }