Слегка поверните элемент фона

Я создал макет, в котором элемент фона слегка повернут в верхнем левом углу.

Но как бы то ни было, я видел кое-что, что вы можете сделать с SVG, но никогда раньше не работал с ним.

Прямо сейчас я использую следующую технику:

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

и это вращает элементы в противоположном направлении, что они просто выровнены по горизонтали.

Но это не совсем подходит моему экрану, когда я уменьшаю масштаб или мне нужно иметь много отрицательных полей, но я не думаю, что это хороший способ решить эту проблему.

ВотCodePen как дела сейчас

Вот как это должно выглядеть:

Приведенное выше изображение является лишь одной плиткой для образца.Вот как это будет выглядеть на странице. Черные полосы на всю ширину экрана - это идея.

нетhover эффекты необходимы на форме, это просто должно быть статичным.

Ответы на вопрос(2)

Ваш ответ на вопрос