Если у вас есть несколько разделов на одной странице, то было бы приятно разделить их какой-то линией или фоном. Существует достаточно много вариантов для реализации подобного, всё лишь ограничивается вашей фантазией. Сегодня мы бы хотели показать вам несколько примеров, вариантов разделения, которые в особенности подойдут для flatдизайна. В наших примерах в основном будут фигурировать только два цвета, а в некоторых будут присутствовать ещё и более тёмные оттенки. Методы, используемые здесь, колеблется от псевдо-элементов, градиентов до SVG графики. SVG просто помещён между секциями, а псевдо-элементы привязываются к определённому классу на соответствующих участках. Обратите внимание, что у нас есть взаимосвязь между последовательными участками разделов, то есть, чтобы стиль следующего перехода смотрелся органично с предыдущим.

SVG используется в тех случаях, когда мы не можем просто использовать псевдо-элемент, которые имеют хорошую адаптивность. Повторные фоновые градиенты позволяют сделать непрерывные рисунки.

Пример разделителя с использованием псевдо-элементов:

section::before,
section::after {
	position: absolute;
	content: '';
	pointer-events: none;
}

.ss-style-doublediagonal {
	z-index: 1;
	padding-top: 6em;
	background: #2072a7;
}

.ss-style-doublediagonal::before,
.ss-style-doublediagonal::after {
	top: 0;
	left: -25%;
	z-index: -1;
	width: 150%;
	height: 75%;
	background: inherit;
	transform: rotate(-2deg);
	transform-origin: 0 0;
}

.ss-style-doublediagonal::before {
	height: 50%;
	background: #116094;
	transform: rotate(-3deg);
	transform-origin: 3% 0;
}

Другим примером является наклонная зигзаг модель (вверх и вниз) выполненная с линейным градиентом:

.ss-style-inczigzag::before,
.ss-style-inczigzag::after {
	left: 0;
	width: 100%;
	height: 50px;
	background-size: 100px 100%;
}

.ss-style-inczigzag::before {
	top: 0;
	background-image: linear-gradient(15deg, #3498db 50%, #2980b9 50%);
}

.ss-style-inczigzag::after {
	bottom: 0;
	background-image: linear-gradient(15deg, #2980b9 50%, #3498db 50%);
}

... или загнутый уголок, который использует диагональный градиенты для имитации треугольника:

.ss-style-foldedcorner::before,
.ss-style-foldedcorner::after {
	bottom: 0;
	width: 100px;
	height: 100px;
}

.ss-style-foldedcorner::before {
	right: 0;
	background-image: linear-gradient(-45deg, #3498db 50%, #37a2ea 50%);
}

.ss-style-foldedcorner::after {
	right: 100px;
	background-image: linear-gradient(-45deg, #236fa1 50%, transparent 50%);
}

Для некоторых примеров мы используем SVG, как для большого треугольника:

<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
	<path d="M0 0 L50 100 L100 0 Z" />
</svg>

Задав preserveAspectRatio="none" и ширину 100%, мы делаем графику SVG  «текучей», чтобы она вписалась во всю ширину без изменения размера его высоты.

Шрифтовые иконки от IcoMoon. 

Перевод: Art

Оригинал: tympanus.net

Демо тут, исходники тут.