Eu criei um layout em que o elemento de plano de fundo é ligeiramente girado para o canto superior esquerdo.

Mas, no entanto, vi algo que você pode fazer com SVG, mas nunca trabalhou com isso antes.

Agora eu uso a seguinte técnica:

.background {
  width:100%;
  margin-left: -160px;
  margin-right: -160px;
  transform: rotate(20deg);
}

e que giram os elementos na direção oposta à de que estão alinhados apenas na horizontal.

Mas isso realmente não se encaixa na minha tela quando eu diminui o zoom ou preciso ter muitas margens negativas, mas não acho que seja uma boa maneira de resolver isso.

Aqui está umCodePen como estão as coisas agora.

Abaixo está como deve ficar:

A imagem acima é apenas um bloco para amostra.Aqui está como ele realmente ficaria na página. As listras pretas são largura total da tela é a idéia.

Nãohover efeitos são necessários na forma, ela só precisa ser estática.