immiike 5 Share Posted September 27, 2020 Hello! I'm trying to build a visual separator (a diagonal) between two sections For this I am using the following code: [data-section-id="5f12b8feec2e7d1136cf635c"] ::before { content: ''; width: 100%; height: 100%; background: linear-gradient(177deg, rgba(255, 255, 255, 0) 87%, #f2ebdf 87.2%); position: absolute; top: 0; left: 0; } This code works except that the diagonal shape is also shown for block elements Does anyone know what I am doing wrong? Many thanks for your help in advance! Link to post
0 immiike 5 Author Share Posted September 27, 2020 I've just seen that there is a text-block within the section I want to format with CSS. I tried deleting this text-block, which is unfortunately not working. After confirming the deletion of the block it appears again. Link to post
0 creedon 777 Share Posted September 27, 2020 Please give us the URL for the page you are working on. If you've not already done so please set up a site-wide password. Post the password here and then we can take a look at your issue. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 immiike 5 Author Share Posted September 28, 2020 Apologies, forgot to share the URL:Â https://octopus-pineapple-yxw8.squarespace.com/ The password is: luca1234 Thanks for having a look! Link to post
0 creedon 777 Share Posted September 28, 2020 Try the following CSS. Â [data-section-id="5f12b8feec2e7d1136cf635c"] .section-background::before { Â background: linear-gradient( 177deg, rgba( 255, 255, 255, 0 ) 87%, #f2ebdf 87.2% ); Â content: ''; Â height: 100%; Â left: 0; Â position: absolute; Â top: 0; Â width: 100%; Â Â Â } /* this one won't be seen */ [data-section-id="5f12b8feec2e7d1136cf6360"] .section-background::before { Â background: linear-gradient( 177deg, rgba( 255, 255, 255, 0 ) 87%, #f2ebdf 87.2% ); Â content: ''; Â height: 100%; Â left: 0; Â position: absolute; Â top: 0; Â width: 100%; Â Â Â } [data-section-id="5f12ba572a5a724d4ae28377"] .section-background::before { Â background: linear-gradient( 177deg, rgba( 255, 255, 255, 0 ) 87%, #f2ebdf 87.2% ); Â content: ''; Â height: 100%; Â left: 0; Â position: absolute; Â top: 0; Â width: 100%; Â Â Â } Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 immiike 5 Author Share Posted September 29, 2020 6 hours ago, creedon said: [data-section-id="5f12b8feec2e7d1136cf635c"] .section-background::before {  background: linear-gradient( 177deg, rgba( 255, 255, 255, 0 ) 87%, #f2ebdf 87.2% );  content: '';  height: 100%;  left: 0;  position: absolute;  top: 0;  width: 100%;    } Works perfectly! Thanks a lot @creedon! 🙂 creedon 1 Link to post
0 immiike 5 Author Share Posted September 29, 2020 An additional thing we found now is that even though the width is set to "100%" it doesn't work fine on the second section on the site Site: https://octopus-pineapple-yxw8.squarespace.com/ @creedon any idea what's happening here?  Link to post
0 creedon 777 Share Posted September 29, 2020 4 hours ago, immiike said: @creedon any idea what's happening here? I don't know what is going on there. It looks good on my setup. Nice and linear looking to me. I'm on macOS using Chrome. I also checked on Safari. Tell us more about your OS and browser. Perhaps others would take a look and report what they see? At least if we can narrow it down somewhat that would give us a direction to go. Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 immiike 5 Author Share Posted September 30, 2020 I am on macOS as well using Chrome. It looks weird to me in Chrome. Â Link to post
0 creedon 777 Share Posted September 30, 2020 8 hours ago, immiike said: I am on macOS as well using Chrome Have you updated Chrome lately? I'm running Version 85.0.4183.121 (Official Build) (64-bit). Just trying to eliminate possibilities. Wouldn't hurt to restart the computer as well. Get a fresh start. Also can you go to another computer and browser and see if you still see the issue? Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support! Link to post
0 immiike 5 Author Share Posted October 4, 2020 Issue persists on various screens, computers and browsers 😞  Link to post
Question
immiike 5
Hello!
I'm trying to build a visual separator (a diagonal) between two sections
For this I am using the following code:
This code works except that the diagonal shape is also shown for block elements
Does anyone know what I am doing wrong?
Many thanks for your help in advance!
Link to post
Top Posters For This Question
7
4
Popular Days
Sep 27
3
Sep 29
3
Sep 28
2
Sep 30
2
Top Posters For This Question
immiike 7 posts
creedon 4 posts
Popular Days
Sep 27 2020
3 posts
Sep 29 2020
3 posts
Sep 28 2020
2 posts
Sep 30 2020
2 posts
Popular Posts
immiike
Works perfectly! Thanks a lot @creedon! 🙂
Posted Images
10 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment