Rayas CSS sin interferencias

Mi mente va inmediatamente a los gradientes repeating-linear-gradienty los detiene cuando pienso en crear rayas en CSS. Se crea una franja usando el mismo color entre dos paradas de color y otra franja (o más) pero usando un color diferente entre dos paradas de color (compartiendo la del medio).

Like so:

background: repeating-linear-gradient(  45deg,  black,  black 10px,  #444 10px,  #444 11px);

Eso creará rayas gris oscuro en ángulo con una separación de 10 píxeles sobre negro.

Pero así es como se muestra en mi pantalla:

¿Puedes ver esa irregularidad en la que una o dos de las franjas parecen más claras y delgadas que las demás? No tengo ni idea de porqué. Supongo que tiene algo que ver con la representación de subpíxeles o cosas similares. Esto no es difícil de replicar. No se trata solo de estos dos colores o este ángulo en particular, sino de cualquier franja creada con repeating-linear-gradient. Sin embargo, deja de ser tan notorio con rayas más gruesas (digamos, 5pxy más gruesas).

Aquí un puñado de ejemplos. Este con rayas más ajustadas en sentido contrario es especialmente preventivo:

Necesitaba hacer esto el otro día, encontré la locura y recordé esta pequeña nota en nuestro artículo sobre rayas. Equivale a: no usar repeating-linear-gradient. Simplemente usa linear-gradient, configura background-sizey déjelo repetir. De hecho, eso parece funcionar. El problema con esto es… ¿qué tamaño tienes background-size? Si las rayas son verticales u horizontales, es bastante fácil manchar algo. Pero si las rayas están en ángulo… calcular el ancho x alto perfecto es complicado. Supongo que está relacionado con el teorema de Pitágoras, pero no entiendo eso.

¿Entonces qué haces?

Utilice esta pequeña y agradable herramienta generadora:

Hace todos los cálculos necesarios para hacerlo bien. Puedes ver el JavaScript no minificado aquí. Busque para / GET BACKGROUND SIZE /ver todos los cálculos en curso. Haga lo que haga allí, las rayas salen perfectas.

Es una pena repeating-linear-gradientque no tenga una mejor salida visual, ya que es mucho más fácil razonar sobre eso, pero bueno, tienes que hacer lo que tienes que hacer.