Creating Hexagon shape polygon with blunt or curved edges

Arun Jaya Prakash · Dec 13, 2024

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hexagon with Rounded Corners</title>
    <style>
        .hexagon {
            position: relative;
            width: 200px;
            height: 230px;
            background-color: #6C7A89;
            margin: 50px auto;
            clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
            border-radius: 20px; /* Adjust this value to change the curvature of the corners */
        }

        .hexagon::before,
        .hexagon::after {
            content: "";
            position: absolute;
            width: inherit;
            height: inherit;
            background-color: inherit;
            clip-path: inherit;
            border-radius: inherit;
        }

        .hexagon::before {
            transform: rotate(60deg);
        }

        .hexagon::after {
            transform: rotate(-60deg);
        }
    </style>
</head>
<body>
    <div class="hexagon"></div>
</body>
</html>

Could anyone help me on this

Michalio · Dec 13, 2024

I found a ready example: https://codepen.io/nathanp/pen/QWKYxaj
It uses sass to generate css, but you can check the generated styles for the hexagon that match yours requirements.

If you want to add sass preprocessor to your app, I can guide you how to do that

Arun Jaya Prakash · Dec 13, 2024

Michalio said:
I found a ready example: https://codepen.io/nathanp/pen/QWKYxaj
It uses sass to generate css, but you can check the generated styles for the hexagon that match yours requirements.

If you want to add sass preprocessor to your app, I can guide you how to do that

Thanks a lot for sharing.

Creating Hexagon shape polygon with blunt or curved edges

Arun Jaya Prakash

New member

Michalio

Moderator

Arun Jaya Prakash

New member