How to Draw a Half Moon using HTML and CSS?
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:
Please Login to comment...