Диагональные блоки это уже давно не новость. Множество дизайнеров используют их для придания динамичности скучным квадратным раскладкам. Ярким примером отличного использования диагональных блоков является сайт stripe.com. Это не модный тренд, который будет забыт через пару месяцев. Этот приём с нами всерьёз и надолго. Поэтому каждый фронтенд разработчик должен уметь верстать такие штуки. Вот об этом и поговорим.

В моём личном арсенале есть три способа вёрстки диагональных блоков:

1. С помощью svg — этот способ отлично описал Эрик Кеннеди в статье на css-tricks;
2. С помощью Clip-Path — почитайте статью на codyhouse;
3. С помощью CSS функции transform — об этом способе мы сегодня и поговорим, так как он мне кажется наиболее простым и подходит в 99% случаев

Для начала создадим базовую разметку блока:

<div class="box">
  <div class="content">
    <p>
      Идейные соображения высшего порядка, а также постоянный количественный рост и сфера нашей активности требуют от нас анализа позиций, занимаемых участниками в отношении поставленных задач. Равным образом укрепление и развитие структуры позволяет выполнять важные задания по разработке позиций, занимаемых участниками в отношении поставленных задач. Равным образом рамки и место обучения кадров обеспечивает широкому кругу (специалистов) участие в формировании позиций, занимаемых участниками в отношении поставленных задач. Разнообразный и богатый опыт укрепление и развитие структуры требуют от нас анализа форм развития. Повседневная практика показывает, что дальнейшее развитие различных форм деятельности обеспечивает широкому кругу (специалистов) участие в формировании системы обучения кадров, соответствует насущным потребностям.
    </p>
    <p>
      Таким образом укрепление и развитие структуры требуют от нас анализа позиций, занимаемых участниками в отношении поставленных задач. Повседневная практика показывает, что постоянное информационно-пропагандистское обеспечение нашей деятельности требуют определения и уточнения модели развития. Таким образом дальнейшее развитие различных форм деятельности играет важную роль в формировании систем массового участия.
    </p>
  </div>
</div>

Всё, дальше в дело вступает CSS. Мы же понимаем, что браузеры на сегодняшний день при рендеринге страницы оперируют ислючительно прямоугольными блоками. И вся наша дагональная красота это только визуальная иллюзия. А в деле обмана пользователя отличными помощниками яляются псевдоэлементы. Вот помощью одного из них мы и воспользуемся.

.box {
  position: relative;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(45deg, #654ea3, #eaafc8);
  transform: skewY(-11deg);
}

.content {
  position: relative;
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

В результате мы получаем желаемое – визуально наш блок стал диагональным.

Но есть небольшая проблема, контент блока не в курсе наших дизайнерских изысков и ведёт себя обычным прямоугольным образом. Очевидно, что необходимо добавить padding-top и padding-bottom. Вот только как их рассчитать? Подбирать на глаз? Можно, конечно, но настоящий самурай так не поступает. Нам нужен способ, который будет работать при любом угле диагонали и не будет требовать от нас никаких дополнительных усилий.

Итак, мы хотим, чтобы контент был расположен как-то вот так (красный блок):

И тут нам на помощь придёт тригонометрия. Если вы, делая в школе очередную домашнюю работу по тригонометрии, в сердцах восклицали: «Да на хрена мне эта тригонометрия? Как она мне в жизни пригодится?», то вот этот момент настал. Пригодилась.

Картинка наглядно демонстрирует, что нам необходимо найти катет x. При этом угол α нам известен, это значение, которое мы используем в transform: skewY(-11deg). Длину катета y мы также легко найдём: это половина ширины контентного блока. И тригонометрия говорит, что ответ на наш вопрос это x = tan(α) * y / 2. Мы не можем, к сожалению, использовать эту формулу в css. Тангенс придётся рассчитать самостоятельно. В нашем случае для угла в 11 градусов тангенс будет 0.19438. В итоге код для диагонального блока будет выглядеть так:

:root {
  --width: 100vw;
  --magic-number: 0.19438;
  --diagonal-padding: calc(var(--width) * var(--magic-number));
}

@media screen and (min-width: 600px) {
  --width: 600px;
}

.box {
  position: relative;
  padding: var(--skew-padding) 0;
}

.box:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(45deg, #654ea3, #eaafc8);
  transform: skewY(-11deg);
}

.content {
  position: relative;
  padding: 1em;
  max-width: var(--width);
  margin: 0 auto;
}

Можете поэкспериментировать с ним на codepen