---
title: "how to make six star with, five star CSS?"  
description: "how to make six star with, five star CSS?"  
author: "Ethan Karla"  
published: 2021-07-15  
updated: 2021-07-15  
canonical: https://www.mindstick.com/forum/156493/how-to-make-six-star-with-five-star-css  
category: "css-css3"  
tags: [".net", "css-css3", "html5", "web application"]  
reading_time: 4 minutes  

---

# how to make six star with, five star CSS?

if is it possible, state a example of this shapes.

## Replies

### Reply by Ravi Vishwakarma

![how to make six star with, five star CSS?](https://www.mindstick.com/mindstickforums/be8454e7-efd6-4658-9cb7-cce151c56209/images/e960bea6-9ca8-41eb-b989-4839be6a2e65.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;
            }
      .star-five {
            position:relative;
            width:0px;
            height:0px;
            display:block;
            border-left:75px solid transparent;
            border-right:75px solid transparent;
            border-bottom:170px  solid blue;
        }
            .star-five::before {
                width:0px;
                height:0px;
                position:absolute;
                border-left:100px solid transparent;
                border-right:100px solid transparent;
                border-bottom:60px  solid blue;
                display: block;
                content: '';
                left: -100px;
                top:60px;
                transform:rotate(180deg);
            }
            .star-five::after {
                width:0px;
                height:0px;
                position:absolute;
                border-left:75px solid transparent;
                border-right:75px solid transparent;
                border-bottom:50px  solid white;
                display: block;
                content: '';
                left: -75px;
                top:120px;
            }
    </style>
    <title>Animation Demo</title>
</head>
<body>
    <div class='star-five'>  </div> Five Star <br />
</body>
</html>
```

![how to make six star with, five star CSS?](https://www.mindstick.com/mindstickforums/be8454e7-efd6-4658-9cb7-cce151c56209/images/8e1c45ea-764c-4577-bc32-6b65d2ed2917.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;
            }
.star-six {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid pink;
            position: relative;
        }
            .star-six::after {
                width: 0;
                height: 0;
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                border-top: 100px solid pink;
                position: absolute;
                content: '';
                top: 30px;
                left: -50px;
            }
    </style>
    <title>Animation Demo</title>
</head>
<body>
    <div class='star-six'>  </div> Six Star <br />
</body>
</html>
```

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