Eu quero repetir uma imagem de fundo que é girada. Tentando torná-lo sem costura está destruindo minha alma.

Começando com algo simples, considere que cada imagem é apresentada como tijolos. Criar uma imagem de fundo repetida sem emenda é bem simples:

(a área vermelha é a colheita). Você pode ver isso funcionando como esperado emhttp://jsfiddle.net/mPqfB.

Agora digamos que quero girar a imagem em 45 graus:

Infelizmente, a mesma safra não funciona mais, como você pode verhttp://jsfiddle.net/mPqfB/1.

Estou tentando descobrir como recortar a imagem corretamente para que tenhamos uma repetição perfeita. Há provavelmente alguns matemáticos bastante triviais envolvidos para fazer isso, mas eu não posso para a vida de mim descobrir isso.

[Atualizar]

Estou tentando seguir os cálculos do @ oezi para facilitar as coisas e criar uma imagem de dimensões: 100 px x 50 px.

Assim sendo:

Múltipla Múltipla Comum = 100
Hipotenusa = 1002 + 1002 = 20000

Agora, estou assumindo que isso significa que não precisamos criar uma imagem de 20000 x 20000 pixels. Estou esperando que @oezi pode esclarecer como ele realiza seu redimensionamento?

Se esta é uma2 + b2 = c2 é igual a c = raiz quadrada de (a2 + b2)

Então podemos concordar que a nossa colheita deve ser de 141px?

Finalmente, isso não explica de onde tiramos a colheita?

[Atualização 2]

Parece que é assim que o redimensionamento deve ser criado. Tirar uma safra de 141px x 141px da imagem gerou os resultados corretos -http://jsfiddle.net/EfuV2/

No que diz respeito a onde cortar, não importa realmente!