Hi, I this tutorial I’ll show how to make hexagon shape by css3. I’ll show this in the easiest way.
Lets start,
Write a id or class like this. now I’ll show by the id. you can change it from (#) to (.) in css and write a class instead of id. now follow the codes below,
HTML
<div id="hexagon"></div>
CSS
#hexagon {
width: 100px;
height: 55px;
background: #000;
position: relative;
left:40%;
margin-top: 30px;
}
#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 #000;
}
#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 #000;
}
Enjoy
