La función repeating-conic-gradient() es una función incorporada en CSS que se usa para repetir gradientes cónicos en la imagen de fondo.
Sintaxis:
imagen de fondo: función cónica repetida (desde el ángulo, color grado 1 grado 2, color grado 1 grado 2, …);
Parámetros:
- ángulo: este parámetro toma un ángulo como su valor, define la rotación del gradiente en el sentido de las agujas del reloj.
- color grado1 grado 2: este parámetro contiene el valor del color, seguido de la posición inicial (en grados) y la posición final (en grados), respectivamente.
Ejemplo: El siguiente ejemplo ilustra la función repeating-conic-gradient() en CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: green;
height: 200px;
width: 200px;
float: left;
margin: 20px;
border-radius: 50%;
}
.a {
background-image:
repeating-conic-gradient(
from 10deg,
green 0deg 10deg,
yellow 10deg 20deg
);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div class="container a"></div>
</body>
</html>
Producción:
gradiente cónico repetitivo
Navegadores compatibles:
- Google Chrome 69.0 y superior
- Internet Explorer: no compatible
- Mozilla 83.0 y superior
- Ópera 56.0 y superior
- Safari 12.1 y superior