CSS3: Bordes Redondeados “inversos” [casi perfectos]


Para un proyecto que estoy trabajando con los buenos amigos de Nuz Estudio me tocó trabajar con bordes redondeados inversos… algo así

lo típico es realizarlo con imágenes y ajustarlo con position absolute con 2 divs y macramé extras, pero en css es algo un poquito más complejo [y también un poquitito más entretenido de armar]

La técnica si es que le podemos llamar así consiste en definir un div y sobre él aplicar otro con bordes redondeados, y además un box-shadow con el atributo inset para que sea “hacia dentro”, finalmente rotamos el div base para que la sombra quede arriba y dé la sensación que la curva continúa. Ojo, no es un ejemplo perfecto, y por el momento funciona sólo en Firefox [hay que aplicar las reglas CSS3 para los otros navegadores]

Puedes ver el ejemplo final acá.

[Probablemente tengas que modificarlo un poquito cuando lo apliques en tu sitio, pero al menos ya tienes la lógica de cómo aplicarlo.

 

,

Agregar un comentario

Su dirección de correo no se hará público.

This site uses Akismet to reduce spam. Learn how your comment data is processed.