Tuesday, September 3, 2013

How to Make Diamond Shield Shape Using CSS

Here full code to make diamond shield shape using only css code.


#diamond-shield {
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom: 20px solid red;
position: relative;
top: -50px;
}
#diamond-shield:after {
content: '';
position: absolute;
left: -50px; top: 20px;
width: 0;
height: 0;
border: 50px solid transparent;
border-top: 70px solid red;
}

Result:


How to Make Diamond Shield Shape Using CSS

Disqus Comments