Make a Hexagon 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]

If you want to make a hexagon in CSS first set up your div. We are going to give our div an id of hexagon.

<div id="hexagon"></div>

Next we will style the div with css.

<style>
#hexagon {
width: 100px;
height: 55px;
background: brown;
position: relative;
}
#hexagon:before {
content: "";
position: absolute;
top: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 25px solid brown;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid brown;
}
</style>

Make a Hexagon in CSS

When we see the code in action we can start taking away from the code to see how each part works. This is a good way to learn how to edit and Make a Hexagon in CSS!