Faire une forme complexe autour d'une image en CSS

Bonjour,

En css avec la propriété clip-path.

Voir un exemple à https://jsfiddle.net/parsimonhi/ad9ehkoz/

Amicalement,

Bonjour,
il y a aussi la proprieté mask : https://developer.mozilla.org/fr/docs/Web/CSS/mask , qui te permet de te servir d'une image translucide .
Par exemple : mask: url(bean.png);
C'est un png mais cela peut-etre aussi un fichier SVG , que ta graphiste pourrait te fournir

voici un exemple https://codepen.io/gc-nomade/pen/YzRJOvP
Modifié par gcyrillus (27 Jul 2023 - 14:06)

merci pour vos deux réponses

Alors clip-path ne semble pas adapté car je ne peux pas faire de courbe (ou du moins j'ai pas trouvé)
Par contre la propriété mask me semble prometteuse.
Toutefois je suis un peu embêté par l'exemple (pourtant pertinent) que tu as donné sur codepen @gcyrillus : j'ai du mal à cerner les caractéristiques de ce fichier PNG au sein du code embarqué dans le CSS.
En effet, est-ce une image rouge "creusée" au milieu ? Quelle format etc...
Aurais-tu d'autres exemples en fichier externe téléchargeable, ou plus de détail sur les caractéristiques que doit avoir ce fichier mask ?

Spheerys a écrit :
j'ai du mal à cerner les caractéristiques de ce fichier PNG au sein du code embarqué dans le CSS.

Je l'ai mise en datauri, au lieu de l'hebergé quelque part sur le net https://fr.wikipedia.org/wiki/Data_URI_scheme C'est le code d'un fichier png

Spheerys a écrit :

En effet, est-ce une image rouge "creusée" au milieu ? Quelle format etc...

la ou les couleurs de l'image sont sans importance, ici le rouge est la couleur de fond de body/html et le jaune la couleur de fond du div.
Les zones visibles du div correspondent au zones visible de l'image. Toutes les parties translucide de l'image sont reporté sur le div (l’élément ou la règle mask est appliquée).
Ce sont les zones transparentes qui sont importantes et qui découpent ton élément visuellement, la forme peut avoir n'importe quelle couleur(s).

Spheerys a écrit :

Aurais-tu d'autres exemples en fichier externe téléchargeable, ou plus de détail sur les caractéristiques que doit avoir ce fichier mask ?

Tu peut utilisé et tester n'importe quel PNG ou SVG qui a une ou plusieurs zones transparentes.
Ta graphiste a simplement besoin de te fournir (ou toi de l'extraire du fichier graphique) la forme en haricot de ton image à la taille voulue dans un png avec la forme visible et le reste en transparence.

cdt
Modifié par gcyrillus (28 Jul 2023 - 00:44)