The HTML | divider

This is a story about how to get creative with section dividers

4 min readApr 27, 2024

Many web pages today are organized into sections. This is a very natural way to design web pages. Whether introducing different products, topics, or ideas, each section guides the reader through a specific aspect of the website’s content.

Most often, these sections come with a clear separator, a vertical line that separates the two sections. The typical way to create this divider is to give the different sections different background colors. The distinction clearly lets the reader know that they are moving from one section to another as they’re reading through the web page.

But, does it really need to be a vertical line? How about getting a bit playful with these dividers? This article looks into how to get creative and change the shape of these dividers. Let’s go!

As an example, we’re having a look at the medium.com/business page. This page has two separate sections in the top of the page. The topmost section has a clear yellow orange background color and the subsequent section has a white background. Here’s what it looks like:

On the diagonal

First up is the most obvious one, tilting the line. There are a few ways to go about creating rotated and titled web content. Let’s have a look at what such a divider might look like using SVG. SVG is, in my opinion, the easiest one to work with when it comes to simple 2D graphics and drawing your own content.

Here’s the code for creating such a diagonal line (a triangle) in SVG code.

<svg
  viewBox="0 0 100 100"
  style="width: 100%; height: 120px;position: relative;display: block;"
  preserveAspectRatio="none"
>
  <rect x="0" y="0" width="100" height="100" fill="white"></rect>
  <path fill="#ffc017" d="M 0 0 L 100 0 L 100 100 Z"></path>
</svg>

The above code makes up a 100 by 100 unit scalable vector. Inside the SVG container we have one rect (a rectangle), essentially corresponding to the background, and one path that makes up the triangle. We could have settled for just the triangle and then set the CSS background-color rule of the container. However, the above is more readable. The triangle is basically a filled path that connects the three points (0, 0), (100, 0) and (100, 100) with four lines.

An other important thing here to notice here is the preserveAspectRatio attribute, which is set to none. This attribute makes the divider element stretch, and thus making the divider responsive when resizing the web page.

Let’s have a look what it looks like when the above is inserted, copy and pasted, into the web page. Here we go:

Pretty neat, huh? Just having a diagonal line, make the web page stick out and seem slightly less ordinary.

Curved divider

Ok, now, let’s bend it! The straight diagonal line makes the divider a bit more playful. However, the real kicker with SVG is the ease with which we can create curved lines, or so called Bézier curves. With some slight modifications to the SVG, we can make it much smoother.

Here’s what converting the triangle to a curved divider looks like in Inkscape, an open source vector editing tool. All we need to do is to add a additional node and make it a curved node. Here is what it looks like:

Looking at the Inkscape XML editor (Edit -> XML editor) gives us the following markup.

<svg
  viewBox="0 0 100 100"
  style="width: 100%; height: 120px;position: relative;display: block;"
  preserveAspectRatio="none"
>
  <rect x="0" y="0" width="100" height="100" fill="white"></rect>
  <path fill="#ffc017" d="M 0,0 H 100 V 100 C 100,100 92.831192,62.058256 65,35 37.168808,7.941744 0,0 0,0 Z"></path>
</svg>

And the following result when copied into the web page