---
title: "How to make Pentagon, Octagon and Hexagon with CSS?"  
description: "How to make Pentagon, Octagon and Hexagon with CSS?"  
author: "Ethan Karla"  
published: 2021-07-15  
updated: 2021-07-15  
canonical: https://www.mindstick.com/forum/156494/how-to-make-pentagon-octagon-and-hexagon-with-css  
category: "css-css3"  
tags: [".net", "web development", "css-css3", "html5"]  
reading_time: 6 minutes  

---

# How to make Pentagon, Octagon and Hexagon with CSS?

If it is possible then give an example.

## Replies

### Reply by Ravi Vishwakarma

![How to make Pentagon, Octagon and Hexagon with CSS?](https://www.mindstick.com/mindstickforums/3fadcde0-1192-462b-bbad-e94fb4c3cc16/images/1ab77c2b-dc00-4ec7-a6af-921c5142f263.png)

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

![How to make Pentagon, Octagon and Hexagon with CSS?](https://www.mindstick.com/mindstickforums/3fadcde0-1192-462b-bbad-e94fb4c3cc16/images/8c90dd4a-61df-40d3-b44b-ac6a2dd517ca.png)

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

![How to make Pentagon, Octagon and Hexagon with CSS?](https://www.mindstick.com/mindstickforums/3fadcde0-1192-462b-bbad-e94fb4c3cc16/images/382e4860-c7a7-4aca-9a49-07017e90db29.png)

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

\


---

Original Source: https://www.mindstick.com/forum/156494/how-to-make-pentagon-octagon-and-hexagon-with-css

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
