Utiliser des dégradés coniques pour créer une bordure sympa

Les dégradés coniques peuvent être utilisés pour créer des effets intéressants, comme cet exemple de bordure.

Ce CodePen créé par Adam Argyle, initialement partagé via cette tweet sur Twitter, montre comment utiliser une conique dégradé sur créer une bordure.

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

Terry Mun sur le plan créatif dupliqué C'est le codepen d'Adam qui l'a créé CodePen. Passez la souris sur l'icône et vous verrez le dégradé changer, grâce à un peu de JavaScript Mettre à jour une propriété CSS personnalisée qui stocke l'angle de rotation

Ces exemples utilisent le border-image-source . Cette propriété définit l'image source utilisée pour créer les . Comme pour les autres propriétés qui acceptent une valeur d'image, tout dégradé CSS est également valide.

border-image-source

Navigateurs pris en charge

  • Chrome: 15 <ph type="x-smartling-placeholder">
  • Edge: 12 <ph type="x-smartling-placeholder">
  • Firefox: 15 <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Source

Dégradé conique

Navigateurs pris en charge

  • Chrome: 69 <ph type="x-smartling-placeholder">
  • Edge: 79 <ph type="x-smartling-placeholder">
  • Firefox: 83 <ph type="x-smartling-placeholder">
  • Safari: 12.1. <ph type="x-smartling-placeholder">

Source