Open In App

How to Draw a Half Moon using HTML and CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Various shapes can be drawn using HTML and CSS and so is the shape of a Half Moon, This shape can be drawn by manipulating a div element using some CSS Properties.

HTML Code: In this section we have a basic div tag.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width,
                 initial-scale=1.0">
  <title>Half Moon</title>
</head>
<body>
  <div></div>   
</body>
</html>


CSS Code: In this section we Draw the Half Moon by manipulating our div element, we will use the box-shadow and border-radius properties to draw the half-moon.




<style>
  *{
     margin: 0;
     padding: 0;
     background-color: black;
      
   }
   /*Drawing the half moon by manipulating the div box*/
   div{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: 100px;
     width: 100px;
     box-shadow: -15px 15px 0 5px white  ;
     border-radius: 50%;
   }
  </style>


Final Code: It is the combination of the above two code sections.




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, 
                 initial-scale=1.0">
  <title>Half Moon</title>
</head>
<style>
  *{
     margin: 0;
     padding: 0;
     background-color: black;
      
   }
   /*Drawing the half moon by
     manipulating the div box*/
   div{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     height: 100px;
     width: 100px;
     box-shadow: -15px 15px 0 5px white  ;
     border-radius: 50%;
   }
  </style>
<body>
  
  <div></div>   
</body>
</html>


Output:



Last Updated : 31 Jul, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads