We can make a curved edge hexagon by using the pseudo-element property of CSS.
- Use a div element to create a rectangle and also add border-radius to it.
- Now create a pseudo-element after using CSS and rotate it by using 60deg.
- Also create another pseudo-element before by using CSS and rotate it by -60deg.
Example 1: This example draws a curve edge hexagon using CSS.
<!DOCTYPE html> <html> <head> <title>
Draw a Curved Edge
Hexagon using CSS
</title>
<style>
.hexagon {
top : 30 vh;
left : 40% ;
position : absolute ;
margin : 0 auto ;
background-color : dodgerblue;
border-radius: 10px ;
width : 100px ;
height : 63px ;
box-sizing: border-box;
transition: all 1 s;
border : 0.4 vh solid transparent ;
}
/* Creating pseudo-class */
.hexagon:before, .hexagon:after {
content : "" ;
border : inherit;
position : absolute ;
top : -0.5 vh;
left : -0.5 vh;
background-color : dodgerblue;
border-radius: inherit;
height : 100% ;
width : 100% ;
}
/* Align them in such a way
that they form a hexagon */
.hexagon:before {
transform: rotate( 60 deg);
}
.hexagon:after {
transform: rotate( -60 deg);
}
</style>
</head> <body style= "text-align: center;" >
<h 1 style= "color:forestgreen;" >
Geeks For Geeks
</h 1 >
<!-- Hexagon Division -->
<div class= "hexagon"
id= "hexagon" >
</div>
</body> </html> |
Output:
Example 2: How to draw a curved edge hexagon using CSS with some effect.
<!DOCTYPE html> <html> <head> <title>
Draw a Curved Edge
Hexagon using CSS
</title>
<style>
.hexagon {
top : 30 vh;
left : 40% ;
position : absolute ;
margin : 0 auto ;
/*To Add effect on the background*/
background : linear-gradient(to left ,
DarkBlue, DodgerBlue);
border-radius: 10px ;
width : 100px ;
height : 63px ;
box-sizing: border-box;
transition: all 1 s;
border : 0.4 vh solid transparent ;
border-top-color : dodgerblue;
border-bottom-color : dodgerblue;
}
/*To create pseudo-class */
.hexagon:before, .hexagon:after {
content : "" ;
border : inherit;
position : absolute ;
top : -0.5 vh;
left : -0.5 vh;
/*To Add effect on the background*/
background : linear-gradient(to left ,
DarkBlue, DodgerBlue);
border-radius: inherit;
height : 100% ;
width : 100% ;
}
/* Align them in such a way
that they form a hexagon */
.hexagon:before {
transform: rotate( 60 deg);
}
.hexagon:after {
transform: rotate( -60 deg);
}
</style>
</head> <body style= "text-align:center;" >
<h 1 style= "color:forestgreen;" >
Geeks For Geeks
</h 1 >
<!-- Hexagon Division -->
<div class= "hexagon" id= "hexagon" ></div>
</body> </html> |
Output: