Tagged: ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • February 12, 2018 at 11:56 pm #911432
    Green Beans Creative

    Hi! Is it possible to utilize a background image with the diagonal border? Maybe set the border as transparent? See screenshot. (hosted on WPengine) alt="screenshot" />

    February 13, 2018 at 6:29 am #911547
    Rikard

    Hey Christina,

    I’m not sure if that would be possible, have you tried this somewhere? If so then please post a link to where we can see the element in question so that we can have a closer look.

    Best regards,
    Rikard

    February 13, 2018 at 6:08 pm #911822
    Green Beans Creative

    I haven’t tried it, the example above is from another WP theme… I’ve seen a bunch of threads asking the question but none ever seemed to come to a resolution?? Is is possible to set a transparency on the diagonal border? Or is there another way?

    February 13, 2018 at 6:54 pm #911846
    Guenni007

    if you are a bit familiar with coordinate systems and polygones – you can try the clip-path method:
    the css code is on that test-page.

    https://webers-testseite.de/elegant/polygones/

    polygone coordinates starts at left top corner and goes clockwise around.
    to have y coordinates it will be nice to have relativ values concerning to screen width

    The starting page is made this way too: https://webers-testseite.de/elegant
    on scrolling you will see that is realy transparent

    • This reply was modified 6 years, 9 months ago by Guenni007.
    February 13, 2018 at 10:33 pm #911939
    Basilis

    Hi,

    Let us know if that way would help you at all.

    Best regards,
    Basilis

    February 14, 2018 at 10:04 pm #912521
    Green Beans Creative

    hey! thanks for the info Guenni but that might be a bit advanced for me ha… Basilis, any other options? I’ve seen a bunch of threads requesting this, has there been a solution that I might be missing?

    February 15, 2018 at 9:15 pm #912921
    Basilis

    Hi,

    I am afraid we do not have an other solution for it at all :(

    Best regards,
    Basilis

    February 15, 2018 at 10:44 pm #912999
    Guenni007

    well it is on basis no magic –

    that is the skewed section:

    #color-section-skew {
-webkit-clip-path: polygon(0 10vw,100% 0,100% calc(100% - 10vw),0 100%);
clip-path: polygon(0 10vw,100% 0,100% calc(100% - 10vw),0 100%);
margin-bottom: -10vw;
}

    and this is how the css is build:
    click to enlarge

    the only thing to know is that on webpages down means + values ; up means – values
    first point x is 0 and y is 10vw down
    second point x is 100% and y is 0
    etc.

    February 16, 2018 at 6:27 am #913134
    Rikard

    Hi,

    Thanks for sharing your code @guenni007, much appreciated :-)

    Best regards,
    Rikard

    October 10, 2018 at 11:08 am #1019875
    lleonera

    I can’t see properly Geunnini007 answer, can someone help me out please? I want to achive the same! I have been trying but keep failing

    Thank you !

    October 11, 2018 at 12:09 am #1020092
    Guenni007

    i reopened my test-page on : https://webers-testseite.de/elegant/polygones/
    i will close it soon on various reasons.

    June 18, 2020 at 12:36 pm #1223677
    Sigmund

    Just a remark: Guennis solution works for me. Thanks for that!

    Best
    Sigmund

    June 18, 2020 at 2:28 pm #1223714
    Guenni007

    that test page is gone to heaven :)
    but the solution on https://kriesi.at/support/topic/diagonal-background-image/#post-912999 is a nice starting point.

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.