[RÉGLÉ] maillot en CSS

[Cosmic]

Bonjour
sur cette page (sujette à plein de changements encore ) https://j4.smilecollector.photos/ind...-stars-379-eng, j'ai deux cases qui reprennent en CSS les couleurs des maillots ici des joueureuses du RDMC (inutile de préciser que chaque équipe à un maillot différent?)

je me demandais s'il était possible de rendre ça un peu plus joli en donnant au rectangle la forme d'un maillot/t-shirt
je vois deux solutions possibles : soit (1) en faisant une forme de maillot stylisé en CSS (j'ai vu passer des trucs de fou, donc on ne sait jamais) soit (2) en appliquant mon CSS dans un rectangle aux dimensions de l'image ci-dessous et en mettant cette image par-dessus (avec donc le t-shirt lui-même en transparence bien entendu)


bien entendu, je suis ouvert à toutes vos propositions permettant de réaliser cet exercice

[woluweb]

A priori je dirais : mettre une image au format svg... et alors on peut la coloriser directement en css.

[Cosmic]

A priori je dirais : mettre une image au format svg... et alors on peut la coloriser directement en css.

je vais regarder à ça - merci

[Cosmic]

bon alors, j'ai tenté différentes approches
- conversion d'un fichier image en svg
- trouver une image sur internet
- insérer un code avec les balises <svg> (j'ai lu quelque part que c'était le seul moyen de modifier en CSS)

je suis sur JCE mais j'ai essayé d'autres éditeurs... incapable d'insérer la balise SVG (sauf dans codemirror mais j'ai pas vraiment envie d'utiliser un truc non wysiwyg)

un CSS "simple" comme fill ne fonctionne pas - une idée?

ps: j'ai semble-t-il bien changer la configuration
ps2: ce sont juste des rectangles dans le code ci-dessous

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="300" viewBox="0 0 200 300"> <!-- T-shirt body --> <rect x="50" y="50" width="100" height="150" fill="#ffffff" /> <!-- Left sleeve --> <rect x="50" y="50" width="40" height="100" fill="#0099cc" /> <!-- Right sleeve --> <rect x="110" y="50" width="40" height="100" fill="#0099cc" /> </svg>

[tataye]

hello :
ce que je ferai :
une image avec transparence (cela peut être du svg comme du png)
un background color dans le containeur de cette image (avec une classe par exemple)
parce ce que si tu mets ta couleur dans ton svg, alors tu risques d'avoir des problèmes pour la modifier ( javascript ou variable css)

[Cosmic]

tataye j'essaie ça

[Cosmic]

en appliquant la proposition de tataye - ça donne ceci

img.tshirt {
     background: rgba(255, 0, 0);
     background: linear-gradient(90deg,
     rgba(255, 0, 0) 40%, /*rouge*/
     rgba(255, 255, 255) 55%, /*blanc*/
     rgba(0, 0, 0) 60%, /*noir*/
     rgba(255, 0, 0) 70%); /*rouge*/
}​

comme c'est une représentation bcp trop approximative du maillot, avec l'avis des "joueureuses" (c'est comme ça qu'iels nous demandent de dire) on va rester sur une forme plus simple comme un rectangle ou un rond

merci pour ton conseil woluweb - j'avais quand même essayé mais de ce que j'ai lu, pour être modifier, il faut insérer la forme dans une balise <svg>blabla</svg> et je n'y suis pas arrivé :/
le rectangle et le rond peuvent être fait en css mais si tu as un truc... je suis curieux