Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Draw a Half Moon using HTML and CSS?

  • Last Updated : 31 Jul, 2020

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




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




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!