Make a Hexagon in CSS

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.

[code]<div id="hexagon"></div>[/code]

Next we will style the div with css.

[code]<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>[/code]

Only cool people share!

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!

Make a Hexagon in CSS was last modified: May 22nd, 2015 by Maximus Mccullough
Summary
Make a Hexagon in CSS
Article Name
Make a Hexagon in CSS
Description
Make a Hexagon in CSS. Easily cut and paste code to make it your won.
Author
create-a-hexagon-with-css

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.