How to Draw a Curved Edge Hexagon using CSS ? - GeeksforGeeks

16 Apr, 2020
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:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
CSS-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)