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