Des angles arrondis sans image ni Javascript

Beaucoup de site web utilisent des boîtes avec des angles arrondis dans leur interface graphique. En général, les utilisateurs trouvent celà plus sympatique. Pourtant, ils sont loin de penser auxproblèmes techniques auxquels sont confrontés les développeurs en terme d’implémentation.

En effet, les angles arrondis ne font pas partie, pour le moment, des langages CSS. Il faut donc ruser au moyen d’image ou de Javascript pour afficher de tels angles. Or, je ne suis pas fan des images et autre Javascript[1].

Heureusement, CSS Play s’est collé au problème et propose une solution utilisant uniquement du CSS avec Krazy Korners. J’avoue que cette méthode est quelque peu brutale. Puisqu’elle demande de placer quatre sections <div /> avant et quatre autres après chaque boîte à afficher. Pourtant, cet exploit ne convient pleinement car il est compatible avec la plupart des butineurs actuels.

Pour ceux qui souhaitent avoir plus de détails sur cette implémentation, il existe une explication techniques sur les Krazy Korners.

Notes

[1] Au grand regrêt d’Olivier. ;-)

Laisser un commentaire