How to Draw a Curved Edge Hexagon using CSS ?
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 ;
}
.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% ;
}
.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 ;
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;
}
.hexagon:before, .hexagon:after {
content : "" ;
border : inherit;
position : absolute ;
top : -0.5 vh;
left : -0.5 vh;
background : linear-gradient(to left ,
DarkBlue, DodgerBlue);
border-radius: inherit;
height : 100% ;
width : 100% ;
}
.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:
Last Updated :
16 Apr, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...