Open In App

How to Draw a Half Moon using HTML and CSS?

Improve
Improve
Like Article
Like
Save
Share
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