How to make Pentagon, Octagon and Hexagon with CSS?

Ethan Karla 758 15 Jul 2021

If it is possible then give an example.

1 Answers

Ravi Vishwakarma 15 Jul 2021

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

         .penta-goan {

            display: block;

            position: relative;

            border-bottom: 60px solid red;

            border-left: 75px solid transparent;

            border-right: 75px solid transparent;

        }

            .penta-goan::before {

                content: 'Pentagaon';

                position: absolute;

                display: block;

                width: 100px;

                height: 75px;

                top: 60px;

                left: -75px;

                border-top: 75px solid red;

                border-left: 25px solid transparent;

                border-right: 25px solid transparent;

            }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='penta-goan'>  </div> Pantagon <br />

</body>

</html>

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

         .hexa-goan {

            width:0px;

            height:0px;

            position:relative;

            display:block;

            border-bottom:50px solid red;

            border-left:75px solid transparent;

            border-right:75px solid transparent;

        }

            .hexa-goan::before {

                position:absolute;

                content:'Hexagaon';

            width:150px;

            height:70px;

            display:block;

            background-color:red;

            top:50px;

            left:-75px;

            }

            .hexa-goan::after {

            width:0px;

            height:0px;

            position:absolute;

            display:block;

            content:'';

            top:120px;

            left:-75px;

            border-top:50px solid red;

            border-left:75px solid transparent;

            border-right:75px solid transparent;

            }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='hexa-goan'>  </div> Hexagon <br />

</body>

</html>

Octagon

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>

<head>

    <meta charset='utf-8' />

    <style type='text/css'>

        body{

            text-align:center;

            display: flex;

            flex-direction:column;

            justify-content: center;

            align-items: center;

        }

            body div {

                margin: 50px;

            }

         .octa-goan {

            position:relative;

            display:block;

            width:150px;

            height:50px;

            top:100px;

            background-color:black;

        }

            .octa-goan::before {

                width:70px;

                height:0px;

                position:absolute;

                display:block;

                content:'';

                border-bottom:40px solid black;

                border-left:40px solid transparent;

                border-right:40px solid transparent;

                top:-40px;

            }

            .octa-goan::after {

                width:70px;

                height:0px;

                position:absolute;

                display:block;

                content:'';

                border-top:40px solid black;

                border-left:40px solid transparent;

                border-right:40px solid transparent;

                top:50px;

            }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='octa-goan'>  </div> Hexagon <br />

</body>

</html>

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.

Open .md

forum

How to make Pentagon, Octagon and Hexagon with CSS?

Can you answer this question?

1 Answers