Se puede crear fácilmente una forma de semicírculo o semicírculo usando HTML y CSS. Usaremos la propiedad border-radius para dibujar la salida deseada.
Código HTML: en esta sección crearemos un elemento «div» simple usando la etiqueta <div> .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Semi Circle</title> </head> <body> <div></div> </body> </html>
Código CSS: en esta sección, primero diseñaremos el cuadro «div» usando propiedades CSS simples y luego dibujaremos el semicírculo usando la propiedad border-radius .
CSS
<style>
* {
margin: 0;
padding: 0;
background-color: white;
}
/* Using the "border-radius" property
to draw the semi-circle*/
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 200px;
border-radius: 150px 150px 0 0;
background-color: green;
}
</style>
Código final: es la combinación de las dos secciones de código anteriores.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Semi Circle</title>
<style>
* {
margin: 0;
padding: 0;
background-color: white;
}
/* Using the border-radius property
to draw the semi-circle*/
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 200px;
border-radius: 150px 150px 0 0;
background-color: green;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Producción:
CSS es la base de las páginas web, se usa para el desarrollo de páginas web mediante el diseño de sitios web y aplicaciones web. Puede aprender CSS desde cero siguiendo este tutorial de CSS y ejemplos de CSS .
Publicación traducida automáticamente
Artículo escrito por lakshgoel204 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA