Jump to content

Css code for section divider

Recommended Posts

I found an online site that creates shapes and online css codes for it, im trying to add a tilt shape for my sections and i am not able to see it work, why is that? is there something i need to fix in the code?

 

.custom-shape-divider-top-1666204514 {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}

.custom-shape-divider-top-1666204514 svg {
position: relative;
display: block;
width: calc(104% + 1.3px);
height: 134px;
transform: rotateY(180deg);
}

.custom-shape-divider-top-1666204514 .shape-fill {
fill: #000000;
}
 
I want to do it as a start for the "Explore" section on the home page, right under the the video under the header, as it shows on the second picture i uploaded
I'd appreciate if you sacrifice few minutes to help me finish only this part :3
here's the website password if u need it yKrss2@1
 
 

triangle_shape-removebg-preview.png

forum squarespace.png

Edited by displaynameis1234
Link to comment
  • Replies 6
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

How have you added this to the page? Can you share the website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 10/21/2022 at 12:03 AM, displaynameis1234 said:

they are 2 pictures uploaded on top of eachother , the tilt shape is what im trying to attach in between first and 2nd section as a divider  

What is password?

accesspasssword.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

When using DevTools, I was not able to see any HTML element with the class name ".custom-shape-divider-top-1666204514" Is there maybe an HTML code snippet that is supposed to go with it?

If not, I found this blog post explaining how to achieve slanted sections in Squarespace 7.1 seems to have good reviews: https://www.rebeccagracedesigns.com/blog/slanted-sections-squarespace-7-1

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.