Tagged: color section, Diagonal Border
-
AuthorPosts
-
February 12, 2018 at 11:56 pm #911432
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 #911547Hey 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,
RikardFebruary 13, 2018 at 6:08 pm #911822I 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 #911846if 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 widthThe 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, 10 months ago by Guenni007.
February 13, 2018 at 10:33 pm #911939Hi,
Let us know if that way would help you at all.
Best regards,
BasilisFebruary 14, 2018 at 10:04 pm #912521hey! 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 #912921Hi,
I am afraid we do not have an other solution for it at all :(
Best regards,
BasilisFebruary 15, 2018 at 10:44 pm #912999well 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 #913134October 10, 2018 at 11:08 am #1019875I 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 #1020092i 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 #1223677Just a remark: Guennis solution works for me. Thanks for that!
Best
SigmundJune 18, 2020 at 2:28 pm #1223714that 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. -
AuthorPosts
- You must be logged in to reply to this topic.