Los gradientes cónicos se pueden usar para crear algunos efectos interesantes, como este bonito ejemplo de borde.
Este CodePen creado por Adam Argyle, que se compartió originalmente a través de este tuit en Twitter muestra cómo usar una línea cónica gradiente en crear un borde.
.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 de manera creativa bifurcado el códec de Adam y creó este CodePen. Mueve el mouse sobre el y verás el cambio de gradiente, gracias a un poco de JavaScript actualizar una propiedad personalizada de CSS que almacena el ángulo de rotación
En estos ejemplos, se usa el
border-image-source
propiedad. Esta propiedad establece la imagen de origen que se usa para crear la interfaz
borde. Al igual que con otras propiedades que aceptan un valor de imagen, cualquier gradiente de CSS
tipo también es válido.
border-image-source
Gradiente cónico