Resolviendo el problema de las líneas irregulares en gradientes

Uno de los patrones de diseño de diseño bastante comunes que probablemente haya encontrado son los bloques con una transición angular de colores degradados. Se parece a la imagen de abajo.


Gradiente angular dentro del rectángulo

Me encontré con esto mientras trabajaba en uno de nuestros proyectos y en lugar de implementar dicho efecto usando una imagen o SVG, decidimos usar un gradiente lineal, cuya ventaja era que era bastante fácil cambiar el ángulo de inclinación, los colores del degradado, etc. directamente en CSS.


Figura 2: bordes irregulares del gradiente angular

El resultado se parecía al que se muestra en la Figura 2. Como puede ver, aparecieron muescas sobresalientes bastante prominentes en el borde de la transición de los colores del degradado.

Afortunadamente, ¡hay una manera muy simple de resolver este problema! Por lo general, cuando desea crear una línea de cambio de color abrupto en un degradado lineal, escriba el código de la siguiente manera:

background: linear-gradient(176deg, white, white 75%, black 75%, black 100%); 

Esto significa que en el rango de 0 a 75% del tamaño del bloque, el color de relleno será blanco y comenzará con 75% - negro. Esto crea una línea bastante irregular. Desafortunadamente, con un cierto ángulo de gradiente y un tamaño de bloque, puede resultar un zigzag bastante feo.

La corrección de esto requiere cambios muy pequeños: agregue la parte decimal al segundo porcentaje, lo que creará un ligero desenfoque en la línea de transición de color. Dependiendo de su situación específica, puede ser necesario seleccionar el valor necesario para que el desenfoque no sea muy notable, pero lo suaviza visualmente.

 background: linear-gradient(176deg, white, white 75%, black 75.3%, black 100%); 

Comparación de líneas de gradiente dentadas y suaves

Ejemplo de CodePen:


Espero que en el futuro esto te ayude a resolver los problemas.

Gracias amakhrov por la idea con "calc"
En mi opinión, con calc () será más confiable: no dependerá del tamaño y el ángulo de inclinación

 linear-gradient(176deg, #A663CC, #A663CC 75%, #6F2DBD calc(75% + 1px))