A Collection of Separator Styles

Today we’d like to share some separator styles with you. When you have several sections in one page, it’s nice to separate them with some kind of line or background. There are so many possibilities and we want to show you just some of them that could look nicely for some flat design. Most of the styles play with two main colors and sometimes a darker shade. But you can also imagine this with white and a color. The techniques used here vary between pseudo-element, gradients and SVG graphics. The SVGs are simply placed between the sections whereas the pseudo-elements are added by the use of classes on the respective sections. Note that we have an interplay between consecutive sections where we might have to adjust a previous section padding to look nice with the separator style of the following section.

SVG is used in the cases where we cannot simply use a pseudo-element that is nicely responsive, like the half circle shape. Repeated background gradients (as background images) allow for a continuous pattern.

And now, dig in, scroll and get inspired!

An example for a separator style using pseudo-elements is the following double diagonal representing a flat shadow:

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;
}

Another example is the inclined zig zag pattern (up and down) made with a linear gradient:

.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%);
}

…or the folded corner that uses diagonal gradients to simulate the triangles:

.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%);
}

For some styles we use SVG, like the big triangle:

<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>

By setting preserveAspectRatio="none" and a width of 100%, we make the SVG graphic fluid to fit into the whole width without resizing its height.

Note that some of the gradients don’t work so nicely on Mobile Safari. Adding the old gradient notation helps a bit but does not result in the same style like when using the new gradient syntax.

The icon font used in this demo was created with the IcoMoon app (IcoMoon icons).

I hope you find these styles useful and inspiring!