1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)

Make a diamond in CSS

To make a diamond in CSS first set up the div. We are going to give our div an id of diamond so we can target it with our CSS style.

<div id="diamond"></div>

Next we will apply the style in the HTML. with our style tags.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂

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

Make a diamond in CSS

Its east to Make a diamond in CSS with this tutorial with the copy and paste codes above. However it would be beneficial if you understood how CSS works and you can do that by adding and subtracting from this code.

Make a diamond in CSS was last modified: May 22nd, 2015 by Maximus Mccullough

Subscribe To My YouTube Channel:

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips


Cool People Share:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.