-
Posts
-
Hi team,
Thanks for your theme. I had an issue that’s been raised before but without a solution so far. I want to use the diagonal lines feature across the whole website, like in the Creative Studio demo. This looks great in that demo, but a problem arises when I want to use background images in a section (i.e. for a parallax).
The diagonal effect there is done through having little triangular wedges at the end of the previous section in the same colour as the section below it. However, as these wedges can only be one solid colour, and are only at the bottom end of each section, it’s as far as I know impossible to have a full-screen image with slanted borders, as there will always be a triangular wedge visible that cannot be transparent or have an image.
My own site is not live yet, but you can find an example in the Creative Studio demo. If you scroll down to the Google Maps section, you’ll see a white wedge right above this section, which I also get with anything fullscreen that is not a solid background colour. Is there any way to solve this?
Thanks,
Sophie
Other topics about this issue (both people gave up on the idea):
https://kriesi.at/support/topic/diagonal-border-not-working-on-some-sections/
Hey saveedrow,
Try using the “Section Bottom Border Styling” in the Color Section
Best regards,
Mikeyou can see here a trial to get it with clip-path option:
https://webers-testseite.de/elegant/polygones/
nearly all modern browsers supports this – and a lot of modern mobile devices too.or for more simpler background-images you can skew surrounding container and skew back content:
https://webers-testseite.de/elegant/skewed-color-sections/you can see what to achive with that polygone method on landing page. (because of fixed content there must be a different solution for mobile devices):
https://webers-testseite.de/elegant/Hi,
@Guenni007 great examples, I had found this interesting tool: CSS clip-path makerBest regards,
Mikeon the most of the developer tools each modern Browser got- we can influence the coordinate points and move them as you like – afterwards you can copy the css code. ( on firefox we can not shift to 100% point – so that had to be manually corrected then ):
and another solution – a little bit easier to understand is this:
the code is here and the image is above : https://webers-testseite.de/multiple-background-images/#av_section_5you can give multiple backgrounds on a container – so no-one hampers you to have on bottom a background right triangle png file with transparent top part ! ;)
the background-size on that triangle is then set to : 100% 120px. a given height and maximum container width.
- You must be logged in to reply to this topic.