Se pueden dibujar varias formas usando HTML y CSS, al igual que la forma de una media luna . Esta forma se puede dibujar manipulando un elemento div usando algunas propiedades de CSS.
Código HTML: en esta sección tenemos una etiqueta div básica.
<!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>
Código CSS: en esta sección dibujaremos la media luna manipulando nuestro elemento div , usaremos las propiedades box-shadow y border-radius para dibujar la media luna.
<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>
Código final: es la combinación de las dos secciones de código anteriores.
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA