tuanphan Posted November 25 Posted November 25 You can follow these steps to create a torn paper effect. If CSS code doesn't work, you can send page url, I will check again. #1. First, find Section ID. If we apply torn paper to Section A, wee will need to find the ID of the section located right below Section A. In my example, it is: section[data-section-id="673d9ea6a5c0716bf1346f46"] #2. Use this code to Custom CSS box section[data-section-id="673d9ea6a5c0716bf1346f46"] { .section-background { overflow: visible; } .section-background:before { content: ''; width: 100%; height: 100%; top: 0px; left: 0; background: inherit; -webkit-mask: url(https://static1.squarespace.com/static/66667502be600c16ccc48b50/t/66a997764d370b5e673fb08d/1722390390547/SWA-divider-1.svg) bottom no-repeat; mask: url(https://static1.squarespace.com/static/66667502be600c16ccc48b50/t/66a997764d370b5e673fb08d/1722390390547/SWA-divider-1.svg) bottom no-repeat; margin-top: 153px; transform: translatey(-100%); position: absolute; pointer-events: none !important } @media screen and (max-width: 800px) { .section-background:before { -webkit-mask-size:300% 50%; mask-size: 300% 30%; } }} #3. Result Desktop Mobile 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment