En este artículo, aprenderemos cómo crear una elipse usando CSS. Para crear una elipse, primero crearemos un rectángulo simple de la altura y el ancho deseados.
Enfoque Para crear un Rectángulo: Para crear una elipse de nuestro tamaño deseado, crearemos un div en HTML y le daremos una clase nombrada como una elipse. Ahora estableceremos la altura y el ancho del div, se verá como un rectángulo. Podemos establecer el color de fondo según nuestra elección.
A continuación se muestra la implementación para crear el rectángulo.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding CSS to the div -->
<style>
/* Setting Height and Width of Rectangle */
.ellipse{
height: 100px;
width: 150px;
background-color: green;
}
</style>
</head>
<body>
<!-- Create a div -->
<div class="ellipse"></div>
</body>
</html>
Producción:
Rectángulo
Enfoque para crear elipse a partir de un rectángulo: ahora, para convertir este rectángulo en una elipse, estableceremos que el radio del borde se refiera a un valor muy alto (50 % a 100 %). Se refiere a la curvatura en las esquinas de la forma. La altura del rectángulo será el eje menor de la elipse y el ancho será el eje mayor.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding CSS to the div -->
<style>
/* Setting Height and Width of Rectangle */
.ellipse{
height: 100px;
width: 150px;
background-color: green;
/* Setting Border Radius */
border-radius: 50%;
}
</style>
</head>
<body>
<!-- Create a div -->
<div class="ellipse"></div>
</body>
</html>
Producción:
Elipse
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA