Soon - Créer une bordure avec des points espacés
Soon - Créer une bordure avec des points espacés

Soon - Créer une bordure avec des points espacés

Sommaire

Présentation

Nous allons découvrir comment créer une bordure sur une div avec des points qui sont plus espacés que le paramètre d'origine en CSS.

Étapes

Pour y arriver c'est assez simple :

  • Étape 1 : Rends-toi sur ce site : https://kovart.github.io/dashed-border-generator/ et de paramétrer ta bordure avec les réglages que tu souhaites
  • Étape 2 : Intègre ce résultat dans un block Embed sur Webflow pour voir directement le résultat
  • Étape 3 : Et franchement c'est tout !

Exemple :

Pour la bordure que je souhaitais créer, le code ressemblait à ça par exemple : <style>.nom-de-ma-classe {background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23FF8C80FF' stroke-width='4' stroke-dasharray='2%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");border-radius: 20px;}</style>

Vidéo

Code Nécessaire

<style>
	.nom-de-ma-classe {
		background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='20' ry='20' stroke='%23FF8C80FF' stroke-width='4' stroke-dasharray='2%2c 8' stroke-dashoffset='0' stroke-linecap='butt'/%3e%3c/svg%3e");
		border-radius: 20px;
	}
</style>

image

Apprends à créer un site moderne, dynamique et intègre les meilleurs outils du marché dans Webflow. Rejoins la formation sans attendre & Maitrise Webflow très rapidement.

-20% offert avec le code WIKI20 (valable sur les paiements en 1x et 4x)