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: 30vh; left: 40%; position: absolute; margin: 0 auto; background-color: dodgerblue; border-radius: 10px; width: 100px; height: 63px; box-sizing: border-box; transition: all 1s; border: 0.4vh solid transparent; } /* Creating pseudo-class */ .hexagon:before, .hexagon:after { content: ""; border: inherit; position: absolute; top: -0.5vh; left: -0.5vh; 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(60deg); } .hexagon:after { transform: rotate(-60deg); } </style> </head> <body style="text-align: center;"> <h1 style="color:forestgreen;"> Geeks For Geeks </h1> <!-- 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: 30vh; 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 1s; border: 0.4vh 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.5vh; left: -0.5vh; /*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(60deg); } .hexagon:after { transform: rotate(-60deg); } </style> </head> <body style="text-align:center;"> <h1 style="color:forestgreen;"> Geeks For Geeks </h1> <!-- Hexagon Division --> <div class="hexagon" id="hexagon"></div> </body> </html> |
Output:
Please Login to comment...