How to make half cut moon with CSS?

Ethan Karla 839 15 Jul 2021

Is it possible to make a half cut moon? If it is possible state with the help of 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;

            }
            
        .moon {

            width:200px;

            height:200px;

            border-radius:50%;

            box-shadow:20px 10px 0px 10px cyan;

        }

    </style>

    <title>Animation Demo</title>

</head>

<body>

    <div class='moon'>  </div> Half cut Moon <br />

</body>

</html>

Markdown for AI

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

Open .md

forum

How to make half cut moon with CSS?

Can you answer this question?

1 Answers