How To Use ShapeDividers.com

How to slant the shape dividers

To slant the shape dividers, do these modifications:

Please note that this works for top and bottom shape dividers, not left and right.

Here are the instructions for a bottom shape divider:

In the code you received, right below this line:

font-family:'shape divider from ShapeDividers.com';

add these:

transform: rotate(-5deg);
transform-origin: left bottom;

If you want it to slant the other side, add this instead:

transform: rotate(5deg);
transform-origin: right bottom;

And also modify the line

right:-0.1vw;

to become:

right: -10.1vw;

Then, add this CSS. Change the .svg_divider selector to the same that was generated for you.

.svg_divider::after {
content: '';
z-index: -3;
background: #000; /* important: change this to the color of your shape divider */
position: absolute;
width: 130%;
height: 200px;
bottom: -200px;
left: 0;
transform: rotate(-5deg);
transform-origin: left bottom;
}

Change the two lines at the end to this if you want it to slant the other way:

transform: rotate(5deg);
transform-origin: right bottom;

Then at the very start, under these lines:

overflow:hidden;
position:relative;

Add this line:

isolation:isolate;

Instructions for a top shape divider:

Exactly the same as above, except the following:

This line:

bottom: -200px;

Should become

top: -200px;

And all the instances of

transform-origin: right bottom;

should have the word ‘bottom’ changed to ‘top’. Like this:

transform-origin: right top; /* could be left top, depending on the slant direction */

I hope you have found this useful.