Pour représenter de manière graphique un pourcentage sour la forme d'un camembert, la page Have a Slice explique une technique d'affichage très simple à mettre en oeuvre, qui utilise uniquement CSS.

En voici un exemple :

L'idée principale de cette technique est de disposer d'une image d'arrière-plan contenant une série d'images prédéfinies, chaqune d'elles représentant un pourcentage particulier, et d'utiliser une feuille de style CSS permettant de lier une règle CSS à une image prédéfinie.

L'image d'arrière-plan contenant les images prédéfinies de nos camemberts, avec un pas de 5% :

Pour afficher un camembert représentant 37% par exemple, on utilise les classes pie et size35 qui, par leurs définitions, permettent de faire apparaître l'image correspondant à 35%, le pourcentage multiple de 5 le plus proche.
Si vous utilisez une technologie côté serveur pour générer vos pages web, vous pouvez donc déterminer dynamiquement, par un simple calcul, la classe CSS à appliquer pour afficher le camembert le plus proche du pourcentage souhaité.

La page Have a Slice ne fournit pas une image d'arrière-plan contenant une image représentant le pourcentage 0, non plus la déclaration de toutes les règles CSS : c'est ce que nous vous fournissons en pièces jointes à cet article.