Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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/ (Purchase code hidden if logged out) /
    https://kriesi.at/support/topic/ (Purchase code hidden if logged out) -some-sections/

    #861692

    Hey saveedrow,
    Try using the “Section Bottom Border Styling” in the Color Section
    2017-10-08_162043

    Best regards,
    Mike

    #1019863

    That only works with solid colors, how can we do it with images?

    #1020094

    you 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 2 months, 1 week ago by  Guenni007.
    #1020119

    Hi,
    @guenni007 great examples, I had found this interesting tool: CSS clip-path maker

    Best regards,
    Mike

    #1020248

    on 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 ):

    Video

    • This reply was modified 2 months, 1 week ago by  Guenni007.
    #1020296

    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_5

    you 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 ! ;)

    click to see

    the background-size on that triangle is then set to : 100% 120px. a given height and maximum container width.

    • This reply was modified 2 months, 1 week ago by  Guenni007.
    #1020547

    Hi,
    Great tutorial and video, thanks for sharing.

    Best regards,
    Mike

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.