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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 2: How to draw a curved edge hexagon using CSS with some effect.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.