Is that possible?

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

@tom2 You can do this with CSS. When I get home later I will post some code.

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

1 Like

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 :thinking:

@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

1 Like

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.

https://bennettfeely.com/clippy/

Great it works. Thanks so much.

1 Like

Hi @PeteSharp
thanks - yes, this was different. But this came up a little bit later, sorry. :blush:
Works great!

Hi @Eldar
thanks, dont know that it works also on mobile, great :ok_hand:
thanks

Hi @RME
I am out :crazy_face:
What code you use for both top and bottom ? Dont get it to work ?!
tom

Update: Get it to work