Я покажу как создать треугольник на CSS с помощью нескольких простых свойств. Для того чтобы упросить себе задачу можно использовать генератор треугольников на CSS.
Анимация границ с помощью свойств CSS
Источник: Nuances of Programming Посетив блог на сайте shoptalkshow, я был приятно удивлен, увидев такой стиль: По моему мнению, этот стиль уникален, особенно некоторых из рамок. В этой статье мы увидим, как можно использовать CSS для создания эффектных границ. Свойство CSS Border Когда речь заходит о типе границ на сайте, первое, что приходит на ум, — это разнообразие таких границ. Наиболее часто используемые — solid (сплошная) и dashed (пунктирная). Последняя используется в приведенном выше примере...
Css повернуть блок по диагонали
Поэтому вы, возможно уже знаете как реализовать подобное решение. Если нет, то эта статья обязательна к прочтению Три способа создания
1) Используйте SVG в форме треугольника. Эта техника хорошо описана Эриком Кеннеди на CSS-Tricks .
2) Скрыть часть вашего раздела, используя CSS-Clip-Path.
3) Использование CSS-преобразований. Вы, возможно, уже догадались, какой из приведенных вариантов я собираюсь использовать. Правильно, третий :-) Начинаем Базовая разметка
<div class="diagonal-box">
<div class="content"> ...