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:
Last Updated :
31 Jul, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...