He creado un diseño donde el elemento de fondo está ligeramente girado hacia la esquina superior izquierda.

Sin embargo, vi algo que puedes hacer con SVG pero nunca antes trabajaste con él.

En este momento uso la siguiente técnica:

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

y que rotan los elementos en la dirección opuesta a la alineación horizontal.

Pero en realidad no se ajusta a mi pantalla cuando alejo el zoom o necesito tener muchos márgenes negativos, pero no creo que sea una buena manera de resolver esto.

Aquí hay unCodePen como están las cosas ahora.

A continuación se muestra cómo debería verse:

La imagen de arriba es solo un mosaico para la muestra.Así es como se vería en la página. Las rayas negras son el ancho completo de su pantalla es la idea.

Nohover los efectos son necesarios en la forma, solo necesita ser estática.