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

Make an Octagon in CSS

To make an octagon in CSS first we need to set up a div. We are going to give our div an id of octagon.

<div id="octagon"></div>

Next we will insert the style for the octagon in our css stylesheet.

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>
#octagon {
width: 100px;
height: 100px;
background: gray;
position: relative;
}

#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid gray;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}

#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid gray;
border-left: 29px solid #eee;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
</style>

To see more about creating octagons please see CSS tricks.

Make an Octagon in CSS was last modified: May 6th, 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-an-octagon-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.