how to make six star with, five star CSS?

Ethan Karla 657 15 Jul 2021

if is it possible, state a example of this shapes.

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;

            }

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

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

Markdown for AI

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

Open .md

forum

how to make six star with, five star CSS?

Can you answer this question?

1 Answers