css - img - ¿Forma de cápsula usando el radio del borde sin un ancho o altura establecidos?

img html title

Question

¿Es posible hacer una forma de cápsula utilizando el radio del borde sin un ancho o alto establecidos?

Quiero que los lados izquierdo y derecho estén completamente redondeados mientras que la cápsula se mantendrá recta a lo largo de su longitud horizontal. Establecer el radio al 50% no parece dar el efecto deseado.

Answer 1

Esto es lo que he encontrado que funciona bien:

border-radius: 50vh;

El soporte del navegador también se ve bien ahora.

Para explicar, el vh es una "Unidad de ventana" que calcula la altura de la ventana gráfica en píxeles. Al decir 50vh para declarar el radio de borde, es 50% * (Viewport Height)px .

Answer 2

La aplicación de un radio de borde muy grande parece funcionar en muchos navegadores (IE9 +, FF, Chrome) como este mod del violín de David http://jsfiddle.net/cthQW/1/

border-radius: 500px;

Answer 3

Para hacer una forma de cápsula en un elemento o div, el valor de border-radius debe ser la división de 2 de la altura de un elemento.

Por ejemplo, aquí utilicé la función calc para una mejor comprensión:

div{
 width: 200px;
 height: 100px;
 border-radius: calc(100px / 2); /*height of the element divided by 2 */
}

Answer 4

Sí, esto es posible (aunque solo he probado en Chromium 28 / Ubuntu 12.10):

div {
    /* this is the only relevant part: */
    border-radius: 20%/50%;

    /* this is irrelevant, and just so the element can be visualised/displayed: */
    width: 50%;
    height: 5em;
    margin: 2em auto;
    background-color: #000;
}

Demostración de JS Fiddle .

La información importante es, obviamente, el 20%/50% del valor de la propiedad; el 20% es la "longitud horizontal" del radio, mientras que el 50% es la "longitud vertical"; el uso de dos medidas diferentes da una curva elíptica al borde, en lugar de una sola medición, lo que produce un radio más circular. Obviamente, esto requiere una cierta cantidad de ajuste a sus propios requisitos

Referencias

• border-radius (en Mozilla Developer Network ).
• Módulo de fondos y bordes de CSS Nivel 3: 5.1. Curva Radios: las propiedades ''radio de borde'' .

Answer 5

Si usa porcentajes , se necesita el ancho del elemento para calcular el radio, por lo tanto, para tener el elemento en forma de cápsula, debe pasar a la propiedad de border-radius mitad de la altura del elemento, usando unidades. Es por eso que funciona cuando pasas 500px . No porque sea la cantidad, sino porque estás usando px como unidades.

.capsule {
    width         : 200px;
    height        : 50px;
    border-radius : 25px;
}

Aquí tienes un ejemplo en CodePen . Intenta jugar con $proportion variable para ver el efecto en el radio del elemento.

Espero eso ayude :)