Make an Octagon in CSS

Message from Maximus

Hey everybody I want to let you know that I have undertaken the grueling task of getting the heck away from WordPress. I was so sick of the problems and updates I had to do all the time. I am now using my ezbloo system and I am integrating all my old posts into the new system. It sucks, but in the end, I will save bundles of time. I needed to keep things simple and that is why I created ezbloo. I'll have more on this later for you guys after I am done with the total integration of my old posts here. So if you are looking for a post and need it faster, shoot me an email and I will make it a priority. [email protected]

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.

<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.