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. Los campos requeridos están marcados *