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.