[Résolu] Border-top en image

Newki75

28 Sep 2020 à 16:50

Bonjour,

Plutôt qu'un simple filet, je voulais mettre une image un peu plus travaillée en tant que border-top d'un footer. Je découvre la propriété border-image mais elle n'a pas l'air simple à utiliser et surtout pas vu comment ne faire que le top.
Comment faites-vous ça ? un border-image ou un élément before: dans le footer ? (c'est un site WordPress donc le footer est géré via des widgets en colonne mais j'ai un #footer...)

Merci pour votre aide et bon aprèm !
Marine

Raphael

Administrateur

28 Sep 2020 à 17:16

Hello,

Cela dépend vraiment du genre de bordure que tu souhaites réaliser.

Certains outils permettent ce genre de choses : https://getwaves.io/ ou encore https://wweb.dev/resources/css-separator-generator ou https://www.shapedivider.app/
Modifié par Raphael (28 Sep 2020 - 17:17)

Newki75

28 Sep 2020 à 17:28

Ma bordure serait comme ça

upload/1601306884-50580-capture.jpg

gcyrillus

Modérateur

28 Sep 2020 à 20:05

Il y a un outil qui peut t'aider : ici https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator avec sa page descriptive de la fonction border-image ce qui t'aidera à comprendre le code générer. https://developer.mozilla.org/fr/docs/Web/CSS/border-image .

par exemple avec ton image postée ici cela pourrait-être :

border-image-slice: 43 0 0 0;
border-image-width: 20px 20px 20px 20px;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: repeat repeat;
border-image-source: url("https://forum.alsacreations.com/upload/1601306884-50580-capture.jpg");

Modifié par gcyrillus (28 Sep 2020 - 20:06)

Newki75

29 Sep 2020 à 11:17

Merci !!

CSS et mise en forme, CSS3

[Résolu] Border-top en image