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

Make a Pentagon in CSS

Make a Pentagon in CSS. Set up a div in your html page and call it pentagon.

<div id="pentagon"></div>

Next we will style the div in our CSS to create the pentagon.

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. 🙂
<style>
#pentagon {
position: relative;
width: 54px;
border-width: 50px 18px 0;
border-style: solid;
border-color: pink transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent pink;
}
</style>

Make a Pentagon in CSS

Tear apart this CSS code piece by piece and you will learn better how to Make a Pentagon in CSS. Most coders learn this way in order to understand the syntax better.

Make a Pentagon 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

Tips

Cool People Share:
create-a-pentagon-with-css

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.