Tuesday, September 3, 2013

How to Make Diamond Square Shape Using CSS

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

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

Result:


How to Make Diamond Square Shape Using CSS

Disqus Comments