¿Cómo se puede crear este aspecto acampanado con CSS o, si es necesario, con SVG?

Here's what I'm trying to make ¿Cómo se puede crear este aspecto acampanado con CSS o, si es necesario, con SVG?

Idealmente me gustaría hacer esto usando CSS3, pero me conformaría con SVG. Puedo hacer algo como esto en CSS JSFiddle ... pero border-radius no parecía expandir las líneas curvas como muestra la imagen.

Básicamente tengo un encabezado div y estoy esperando crear esta región curva más oscura en la parte superior.

Agradecería cualquier ayuda de cualquier gurú de CSS inteligente. ¡Gracias!

Fuente

2012-03-15 C.J.

Es posible que no esté satisfecho con las soluciones de CSS existentes, pero le deseo suerte. –

¿Puedes mostrar lo que has hecho hasta ahora? – Kyle

Claro, he agregado un jsFiddle. –

Lo tengo bastante cerca usando el jsFiddle que comenzó y cambiando un poco el radio del borde.

enter image description here

http://jsfiddle.net/CoryMathews/Q9Mrt/

usando radio de frontera puede definir diferentes longitudes para los ejes X e y. Así que utilicé

border-bottom-right-radius:40px 20px; 
border-bottom-left-radius:40px 20px;

que le da una longitud de 40 en el eje X y 20 en la y. No es tan nítida como tu foto de arriba, pero está bastante cerca. more info

Fuente

2012-03-16 14:18:19 corymathews

¿Cómo se puede crear este aspecto acampanado con CSS o, si es necesario, con SVG?

Respuesta

Cuestiones relacionadas