Custom Section Shapes (Slanted Sections)

What does this code do?

This code snippet will allow you to change the shape of your sections such as creating slanted sections.

Note: This code will crop your section to that shape and show your body colour in the cropped sections. So if the section you are cropping and your body have the same colour, you will not see any effect. To create the slanted section look. You will want the section below to match the body background colour.

Video Tutorial

Design Your Section Shape

Go to https://bennettfeely.com/clippy/ to create the shape or slant you want your section to be. Copy the code generated from “polygon” to “ ; “.

Custom CSS

Copy and paste this code into Design > Custom CSS.

Squarespace 7.0

Note: Parallax Scrolling must be turned off in Site Styles in order for this effect to work.

#PAGEID {
  -webkit-clip-path: CODE GOES HERE;
    clip-path: CODE GOES HERE;
}

Squarespace 7.1

#COLLECTIONID #page .page-section:nth-of-type(1) {
  -webkit-clip-path: CODE GOES HERE;
    clip-path: CODE GOES HERE;
}

Then replace CODE GOES HERE with the code you saved from the Clip Path Maker.

Advanced Tip:

This code is generated by using a coordinate system. If you do not like the options presented, you can create your own.

For example, the following design was created by cropping out a triangle piece in “The Journal” section. The body colour is the same as the background of the “Quote Section” above.

Code Used:

#COLLECTIONID #page .page-section:nth-of-type(3) {
-webkit-clip-path: polygon(0 0, 45% 0, 50% 10%, 55% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 45% 0, 50% 5%, 55% 0, 100% 0, 100% 100%, 0% 100%);
}

How To Use It

1. Go to https://bennettfeely.com/clippy/ to create the shape or slant you want your section to be.

2. Copy and paste the code as indicated above.

3. To learn how to find a collection id, page id, or block id check out our Start Here guide.

4. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.