Hi,
I dont know if that is possible … I have for example a white bloc and below a blue bloc. But know I want that the blocs not parallel …
See Screenshot …
Is this possible with an white svg and margin things ? Dont get it to work …
tom
Hi,
I dont know if that is possible … I have for example a white bloc and below a blue bloc. But know I want that the blocs not parallel …
See Screenshot …
Is this possible with an white svg and margin things ? Dont get it to work …
tom
Look on YouTube. Eldar has a similar sort of thing in a tutorial.
Hi @TrevReav
I think I have seen that video … I dont know, but I think it is not working on mobil and tablets …
@Eldar do you have a idea ?
tom
Hey @tom2,
So you just need to place something like this in the page header
There are two colours you can change to suit… #fff and #00ABEA
Then add the class to the Bloc
<style>
.angle-bg {
background-image: linear-gradient(176deg, #fff 70%, #00ABEA calc(70% + 2px))
}
</style>
It looks like this
Hi @PeteSharp
Cool. Works good. But how do this work when the blue bloc has a background image and no color ?
When this are two blocs … one white and a second with a background image
@tom2, well that’s a little different to your first question. You could use a clip path. Set your image as usual. Then add this class to your page header and the then the bloc
<style>
.topangle-image {
-webkit-clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 100%);
clip-path: polygon(0% 15%, 100% 0%, 100% 100%, 0% 100%);
}
</style>
Change the 15% in both attributes (the second value of both) to edit the angle you want.
Hi Tom,
My tutorial (the second longer one) actually shows how to make it work on mobile devices as well. Obviously, you can use the coding solution as well, but if you don’t like to involve coding, then it’s a good way to make it work.
Cheers,
Eldar
hey @PeteSharp that’s great. Is it possible to get the effect for the top and the bottom of the image?
Hey @RME yes you can by just changing the clipping path.
You can use something like this web app to get the code quickly.
Great it works. Thanks so much.
Hi @PeteSharp
thanks - yes, this was different. But this came up a little bit later, sorry.
Works great!
Hi @RME
I am out
What code you use for both top and bottom ? Dont get it to work ?!
tom
Update: Get it to work