Générer un rectangle avec des cotes variables en CSS avec fond dégradé interne

Question

J'ai quelques variables sur PHP qui gagnent des valeurs de 0 à 100. Je veux développer un système de graphes simple qui dessine un rectangle horizontal donné le nombre (0, 1, 50 et soo). Aussi je veux ajouter un peu de gradient à l'arrière-plan, faire cela en php est compliqué et je ne veux pas plus de charge dans mon serveur, donc je sais que c'est possible en CSS, mais je ne suis pas un développeur CSS. Donc, si n'importe quel corps peut m'aider avec ceci. Dans cette page (http://www.answerbag.com/) vous pouvez voir comment je veux le rectangle, dans les résultats de la section de la piscine au milieu de la page ci-dessus.

Answer 1

c'est très simple puisque vous connaissez la largeur. Puisque vous voulez probablement afficher le spectre complet du dégradé, vous voudrez probablement redimensionner l'image du dégradé en utilisant un css #score1 { width: 30px } sur ce <img id="score1" src="blue_gradient.png"> Ensuite, vous pourrez utiliser l'une des nombreuses méthodes de coins arrondis pour y ajouter les coins arrondis .