Make writing a habit together! This is the sixth day of my participation in the “Gold Digging Day New Plan · April More text Challenge”. Click here for more details.

How to create a slanted divider for your website

An illustration of a slanted dividing line

In the figure above, we have two elements separated by a slanted gap. And to do that, we’re going to cut a piece out of each one. Let’s look at a step-by-step explanation to better understand it.

Step-by-step instructions for creating slanted dividers

Initially, we put the two elements together. We first cut the bottom of the top element as follows (step (2)) clip-path:

Clip-path: polygon(0,100% 0,100% 100%,0 calc(100%-50px));Copy the code

We have a four-point path, and we raise the bottom left corner slightly to create a clipping effect. You will notice that calc(100%-50px) was used instead of 100%.

We do the same for the second element in step (3) using the following method:

Clip-path: polygon(0,100% 50px,100% 100%,0 100%);Copy the code

This time we reduced the upper right corner by the same number of pixels (50pxRather than0). If you’re not familiar with itclip-pathHere’s a better picture to look at.

Clip the waypoint illustration

These points are just x and y coordinates in two dimensions, with a range of [0 100%]. You can easily identify the four corners, and then we can find any other point from there.

Finally, we add a negative margin-top to the second element to reduce the space and get an equal gap of 10px. The final code will be:

Top {clip-path: polygon(0,100% 0,100% 100%,0 calc(100%-50px)); }. Bottom {clip-path: polygon(0,100% 50px,100% 100%,0 100%); margin-top: -40px; }Copy the code

That’s the code you’ll get from the online generator I made. We can improve it by introducing CSS variables:

:root { --size: 50px; /* size of the cut */ --gap: 10px; /* The gap */}. Top {clip-path: polygon(0,100,100,100,0 calc(100% - var(--size))); }. Bottom {clip-path: polygon(0,100% var(--size),100%,0 100%); margin-top: calc(var(--gap) - var(--size)); }Copy the code

As I said in the introduction, we have some simple code that can be easily adjusted to generate responsive partial separators.

How to create a full – width arrow divider for your website

Full – corner arrow divider line illustration

This is very similar to the dividing line before. We will simply deal with more clip-path points.

Step-by-step instructions for creating full-width arrow dividers

I think you might have that idea by now. We follow the same steps and end with the following code:

Top {clip-path: polygon(0,100%,100% calc(100%-50px),50% 100%,0 calc(100%-50px)); }. Bottom {clip-path: polygon(0,50% 50px,100% 100,0 100%); margin-top: -40px; }Copy the code

Here’s another illustration to see the new dot we use for this partial separator.

Clip the waypoint illustration

At first glance, it may seem difficult, but it’s really easy.

We create shapes by linking elements to different points in 2D space. The trick is to create 2 “jigsaw shapes” (a term I just coined) to create the illusion of partial lines of separation. With some practice, you can easily create dividers using the same logic.

Before we move on to the next one, here’s the code that uses CSS variables:

:root { --size: 50px; /* size of the cut */ --gap: 10px; /* the gap */ } .top { clip-path: Polygon (0. 0100% 0100% calc (100% var (size)), 50% 100%, 0 calc (100% var (size))); }. Bottom {clip-path: polygon(0,50% var(--size),100%,100%,100%); margin-top: calc(var(--gap) - var(--size)); }Copy the code

You can already see a pattern in our delimiter code because we use the same technique. Two clip-paths, one negative margin-top, and two CSS variables. It’s so easy!

How to create arrow dividers for your website

Illustration of arrow dividing line

This delimiter is a little more complicated than the previous one, because I’m going to add another variable, the Angle of the arrow. The technique remains the same, but we will have more mathematics to calculate the coordinates of points.

For this, my online generator will be very useful (especially if you’re not happy with the math formula), so you can easily get the final value without any trouble.

For the curious, here’s the common code:

:root { --size: 50px; /* size of the cut */ --gap: 10px; /* the gap */ --angle: 90deg; /* angle of the arrow */ } .top { clip-path: Polygon (0. 0100% 0100% calc (100% var (size)), calc (50% + tan (var (Angle) / 2) * var (size)) calc (100%) var(--size)),50% 100%,calc(50% - tan(var(--angle)/2)*var(--size)) calc(100% - var(--size)),0 calc(100% - var(--size))); } .bottom { clip-path: Polygon (0, 0, calc (50% - tan ((180 deg - var (Angle)) / 4) * var (gap) - tan (var (Angle) / 2) * var (size)) % 0, 50 calc(var(--size) + (1/sin(var(--angle)/2) - 1)*var(--gap)),calc(50% + tan((180deg - var(--angle))/4)*var(--gap) + Tan (var (Angle) / 2) * var (size)) 0100% 0100% 100%, 0. 100%); margin-top: calc(var(--gap) - var(--size)); }Copy the code

I can hear you seeing this scream, but don’t worry if you don’t fully understand it. I’m still using to create different shapes, clip-paths but this time the calculation is a little bit complicated.

The above is valid CSS code, but as of this writing, trigonometry is not supported, so it will not run in any browser. You can calculate the values manually, or you can use the online generator to get clip-path values.

So far we have made 3 different dividers using the same technique. Every time we consider new shapes by playing clip-path values. You can create any divider using the same technique, and the combinations are infinite. Your imagination is the only limit.

Familiarity is a good exercise in clip-path. I recommend using pen and paper to draw the shapes you want. You can recognize the difference in shape. They are then converted to clip-path values.

You can find many online tools that can help you. My favorite is: HTTPS: / / bennettfeely.com/clippy/

How to create a circular divider for your website

Illustration of circular dividing lines

For this separator line, we will use mask instead of clip-path. The difference between clip-path and is that mask relies on the mask image to cut/hide parts of the element. When we talk about images, we also talk about gradients.

Here’s an illustration to see what kind of gradient we need:

The gradient illustration used with the mask property

For the first element, we need two gradients: Alinear-gradient () creates a rectangle at the top, leaves a space at the bottom, and A creates a circle at the bottom resort-gradient (). The combination of the two will give us the final shape of the first element.

The second element just needs a radial-gradient() to create a hole at the top to complete the puzzle.

Our code will be:

.top {
  mask: 
    linear-gradient(#000 0 0) top/100% calc(100% - 50px) no-repeat,
    radial-gradient(farthest-side,#000 98%,#0000) bottom/100px 100px no-repeat;
}
.bottom {
  mask: radial-gradient(60px at 50% -10px,#0000 98%,#000);
  margin-top: -40px;
}
Copy the code

Using the CSS variable, it would be:

:root {
  --size: 50px; /* size of the cut */
  --gap: 10px;  /* the gap */
}
.top {
  mask: 
    linear-gradient(#000 0 0) top/100% calc(100% - var(--size)) no-repeat,
    radial-gradient(farthest-side,#000 98%,#0000) bottom/calc(2*var(--size)) calc(2*var(--size)) no-repeat;
}
.bottom {
  mask: radial-gradient(calc(var(--gap) + var(--size)) at 50% calc(-1*var(--gap)),#0000 98%,#000);
  margin-top: calc(var(--gap) - var(--size));
}
Copy the code

Even with the mask method, the code pattern is the same as with clip-path.

conclusion

Thanks for reading!