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

Les dégradés coniques permettent de créer des effets intéressants, comme cet exemple de bordure.

Ce CodePen créé par Adam Argyle, initialement partagé dans ce tweet sur Twitter, montre comment utiliser un dégradé conique pour 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 a créé le codepen d'Adam de manière créative et a créé ce CodePen. Déplacez votre souris sur l'élément pour observer le changement de dégradé, grâce à un peu de JavaScript qui met à jour une propriété CSS personnalisée qui stocke l'angle de rotation.

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

border-image-source

Dégradé conique