A Collection of Separator Styles

A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind.

Section Separators

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 33

  1. 4

    Hello. Awesome as always! But I have question. How to add this separator before and after section? Like this:


    <div id="portfolio">
    <section class="doublediagonal">
    <h1>Portfolio</h1>
    </section>
    <!-- HERE CONTENT OF PORTFOLIO -->
    </div>

    Because I need this as title of section, only for h1. Nothing more. How do it?

  2. 5

    Hi !

    Thank’s you for this work ! So, i’ve question :
    On Mozilla Firefox, triangles have a small black borders … How i can delete there borders ?

    Sorry for my bad English, i’m French :)

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>