html - con - ¿Cómo hacer un óvalo en css?
circulos en bootstrap (7)
Necesitas establecer el radio del borde en porcentaje:
Porcentaje: indica el tamaño del radio del círculo, o los ejes semi mayor y semi menor de la elipsis, usando valores de porcentaje. Los porcentajes para el eje horizontal se refieren al ancho de la caja, los porcentajes para el eje vertical se refieren a la altura de la caja. Los valores negativos no son válidos.
fuente: MDN
Para obtener una explicación detallada de por qué los valores de píxel para el radio de borde no pueden generar una forma ovalada, vea Radio de borde en porcentaje (%) y píxeles (px)
Ejemplo:
border-radius: 50%;
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 50%;
}
<div class="oval"></div>
Quiero hacer un óvalo como:
Pero cuando utilicé este código:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>Oval</title>
<style type="text/css">
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 40px;
}
</style>
</head>
<body>
<div class="oval"></div>
</body>
</html>
Me da esto:
Para hacer un círculo funciona, pero un óvalo no.
Prueba esto:
.oval {
width: 160px;
height: 80px;
background: #a84909;
moz-border-radius: 80px / 40px;
webkit-border-radius: 80px / 40px;
border-radius: 80px / 40px;
}
PD. No tengo el compilador delante de mí, por lo que puede haber un pequeño error.
Todas las respuestas anteriores, Él no quiere un círculo de acuerdo a su pregunta. Él quiere un óvalo. Esto funciona pero probablemente hay una mejor manera.
#oval{position:relative;background-color:green;width:20px;height:100px;
display:inline-block;z-index:100;
}
#one{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:100px;}
#two{background-color:green; display:inline-block;width:200px;height:100px;border-radius:50%;position:relative;left:-100px;}
<div id="one"> </div><div id="oval"> </div><div id="two"> </div>
Todo lo que tienes que hacer es cambiar border-radius: 40px al border-radius: 50% .
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 50%;
}
<div class="oval"></div>
use un porcentaje como radio de borde, como: border-radius: 50%; .
.oval {
width: 10px;/*change here*/
height: 157px;/* or here if you want to be more sharper*/
border-radius: 50%;
background: #1abc9c;
}
<div class="oval"></div>
Si quieres más formas, puedes generarlas usando
http://enjoycss.com/code/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
<title>Oval</title>
<style type="text/css">
.oval {
width: 160px;
height: 80px;
background: #a84909;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="oval"></div>
</body>
</html>
here se explica otra forma de pensar.