25 Perfect CSS Dividers - Free Web Dev Assets

Preview doesn't show the main feature, click for prettyness >.^

Have seen slanted sections in my travels around the web and wanted to take a stab at it. This one was fun because I had to dust off the cobwebs on my trigonometry! As with most web-codings, there probably are a dozen different ways to do this, here is mine:)

Responsive Skewed Page Dividers using CSS gradients only.

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.

Responsive Scalloped Page Dividers using CSS gradients only.

A little collection of section dividers created with Inkscape and embedded with some small changes

Responsive content divider using pure css (SCSS) taking advantage of flexbox. Medium size devices (991.98px) and down have a horizontal divider Large devices (992) and up have a vertical divider Text or icon centered along line.

Demonstrating how to use Flexbox, 0.5px lines, and CSS filters to create cool horizontal rule-style headings.

Using a single element, these styles create an adjustable-width curly brace that you can use to group items below! You can apply it directly to divs or headings, horizontal rules, etc. An attempt to improve upon http://codepen.io/markusN86/pen/xegaF.

Responsive title with horizontal rule and read more button.

Collection of horizontal rule styles.

A minimal, scalable method of creating those fancy horizontal rules for headers. Uses only one extra DOM element, and works with any amount of text.

Messing around with some fancy horizontal rule styles.

Cool horizontal rule with text in center with buttons that create some nice UI. Made only in css no background images

More SVG dividers on CodyHouse: https://codyhouse.co/ds/components/app/section-divider

CSS to show a page split along a diagonal.