Background-size: 20px 20px;

Alguém? :(

Oi André, desculpa, mas poderia ser mais claro com sua pergunta?

Olá André,

Esse valor na verdade é uma sacada a primeira vista um pouco complexa, mas uma vez que você entende é bem interessante.

A idéia aí é fazer um background que seja uma linha exata com curvatura de 45º, e que repetí-lo na tela crie esse feito de listrado.

Para isso, é feito uma linha de gradiente de 28px (14px + 14px) visto aqui:

linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.1) 14px, rgba(255,255,255,.1) 15px, transparent 15px, transparent)

Depois disso, deixamos o css repetir esse gradiente por toda a tela (é só não setar a propriedade background-repeat). A sacada, é que para essa linha diagonal de 28px caber no espaço do background, precisamos calcular exatamente o background-size.

Um dos jeitos mais simples de calcular isso por exemplo, é o teorema de pitágoras (para futuras referências: https://pt.wikipedia.org/wiki/Teorema_de_Pit%C3%A1goras ) onde no nosso caso, a linha diagonal tem tamanho 28, então podemos calcular usando o teorema:

28ˆ2 = bˆ2 + cˆ2

Porém, no nosso caso, nosso background é um quadrado, logo b e c tem o mesmo tamanho. Se você resolver a equação

28ˆ2 = 2*bˆ2

vai chegar em algo próxima a 20. daí o valor.

Se você quiser experimentar se realmente entendeu, experimenta mudar o valor do gradiente pra algo menor, por exemplo 15, e recalcular o tamanho necessário pra dar o efeito de listrado novamente.

Espero ter ajudado, depois me diz se você conseguiu.

^^

Esclarecido, Fernando!

Muito obrigado!

calculando no excel, usem essa formula e arredondem sempre o resultado para cima.

=(RAIZ(((A1*2)^2)*2))/2

Eu ainda vou pelo olhômetro, pra ver que esta em 45 graus. Vocês fizeram formula em excel e no outro post ali usaram teorema de pitagoras, parabéns pela complicação kkkk!