Beaucoup de site web utilisent des boîtes avec des angles arrondis dans leur interface graphique. En général, les utilisateurs trouvent cela plus sympathique. Pourtant, ils sont loin de penser aux problè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 HTML et 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 HTML et 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 regret d’Olivier. 😉