-
AuthorPosts
-
October 8, 2017 at 3:09 pm #861569
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/
October 8, 2017 at 10:22 pm #861692October 10, 2018 at 10:31 am #1019863That only works with solid colors, how can we do it with images?
October 11, 2018 at 12:19 am #1020094you 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/- This reply was modified 6 years, 2 months ago by Guenni007.
October 11, 2018 at 3:22 am #1020119Hi,
@Guenni007 great examples, I had found this interesting tool: CSS clip-path makerBest regards,
MikeOctober 11, 2018 at 10:27 am #1020248on 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 ):
- This reply was modified 6 years, 2 months ago by Guenni007.
October 11, 2018 at 11:36 am #1020296and 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.
- This reply was modified 6 years, 2 months ago by Guenni007.
October 12, 2018 at 3:03 am #1020547 -
AuthorPosts
- You must be logged in to reply to this topic.