Animation du height avec CSS uniquement

Bonjour,

je veux animer une photo/icône de forme non conventionnelle, disant une étoile, qui a une couleur de fond X. Comment faire pour la "remplir" d'une autre couleur Y, de bas en haut. J'ai vu sur internet, les gens parle de l'effet accordéon et apparemment ce n'est pas du tout évident, surtout pour un novice.

D'après ce que j'ai compris la meilleur solution est d'utiliser deux photos (1 pour chaque couleur) : Afficher la première (étoile vide) puis lui appliquer la deuxième (étoile pleine) en jouant sur la transition de son height, qui part de 0 à une valeur maximale, car et c'est là que la bât blesse, l'animation du height n'est pas du tout évidente.

Avez-vous une idée la dessus ?

Bonjour,

Voici un exemple fonctionnel, il faut adapter l'idée au contexte : https://codepen.io/crego/pen/VwjQaMb

Merci albedo0, c'est clair et concis.

:applo::applo::applo:

Faut peut-être prévoir un overflow: hidden; si l'image n'est pas construite via clip-path...