Rounded section divider

Matt-W-Urst · April 18, 2023

Hi there,

is there a way to round the section dividers?
I would like to use the arrow-design with a rounded "nose".

Thank you very much in advance!
Matt

qosmic · April 19, 2023

You can flip and invert those section borders, but there is not a setting that can round the point. It's possible to add that, but you need a custom clip path that creates the desired shape and you need too apply it to the section border in question with CSS.

You might be able to get the clip path with clippy: https://bennettfeely.com/clippy/

Matt-W-Urst · May 2, 2023

On 4/19/2023 at 3:59 AM, qosmic said:

You can flip and invert those section borders, but there is not a setting that can round the point. It's possible to add that, but you need a custom clip path that creates the desired shape and you need too apply it to the section border in question with CSS.

You might be able to get the clip path with clippy: https://bennettfeely.com/clippy/

Hi, thank you for this tool. I have my own clip path. Do you have an idea, how to apply it to the section border (CSS)?

qosmic · May 3, 2023

You'll have to learn some CSS. You can use the following, but you'll have to customize it.

#CollectionID { 
  #page .page-section:nth-of-type(1) { 
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);
    clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%); 
  } 
}

The collection ID is unique to the page. Under nth-of-type, you tell the browser which section on the page to apply the clip path. FOr example, if it's the third section on that page, you would put nth-of-type(3).

Finally, replace the percentages with your clip path.

Rounded section divider

Recommended Posts

Matt-W-Urst

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

qosmic

Posted Images

qosmic

Link to comment

Matt-W-Urst

Link to comment

qosmic

Link to comment

Create an account or sign in to comment

News

qosmic

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources