Utiliser des dégradés coniques pour créer une bordure sympa
bookmark_borderbookmark
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Les dégradés coniques peuvent être utilisés pour créer des effets intéressants, comme cette belle bordure.
Ce CodePen créé par Adam Argyle, initialement partagé via 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 bifurqué de manière créative le codepen d'Adam et a créé ce CodePen. Pointez sur l'élément, et vous verrez le dégradé changer, grâce à un peu de code 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
Navigateurs pris en charge
Source
Dégradé conique
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2022/05/27 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2022/05/27 (UTC)."],[],[]]