Для использования диагональных линий в современной веб-графике можно следовать таким рекомендациям:

• Определить фокальные точки и активные зоны макета. 1 Это самые важные участки, в них нужно расположить УТП, кнопки, контакты и другие значимые блоки. 1
• Подумать о смысловой нагрузке линий. 1 Например, можно использовать вертикаль для разделения двух смысловых блоков или показать рост с помощью диагонали. 1
• Использовать два вида диагональных линий: 1
• Нисходящая (динамическая) — идёт от левого верхнего угла к правому нижнему. 1 Даёт эффект ускорения и динамики. 1
• Восходящая (статическая) — идёт от правого верхнего угла к левому нижнему. 1 Даёт эффект замедления. 1

Для создания диагональных линий с помощью CSS можно использовать следующие методы: 3

• Градиенты. 3 Позволяют создать переход от одного цвета к другому в заданном направлении. 3 Для этого применяется функция linear-gradient CSS, которая принимает ряд аргументов. 3
• Трансформы. 35 Если длина контента переменная, можно использовать трансформации с псевдоэлементами. 3 Ширина элемента в этом случае будет определяться контентом, и не будет риска обрезания контента. 3
• Свойство clip-path. 3 С его помощью можно создавать сложные фоновые формы элемента. 3

Выбор метода зависит от целей проекта. 3

Примеры сайтов с диагональными элементами можно посмотреть на сайте dejurka.ru. 4