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.
<style>
#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;
}
</style>
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.
