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.

 

Submit your comment

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


Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in /home2/bredecl/public_html/wp-includes/functions.php on line 4757