Streaming live at 10am (PST)

After/before skewed effect

Hi, I would like to create this after/before effect but I need it to work with a certain skew to it, here is the effects preview link

https://preview.webflow.com/preview/marko-vukics-trendy-project?utm_source=marko-vukics-trendy-project&preview=e82c197afec1ac639b804fe1f7f6dabc

It is working and all is good but I need it to have a skew on the right side, to run on a website with this layout

https://preview.webflow.com/preview/carmediav2?utm_source=carmediav2&preview=2d640d7810bf546249660846bbf92947

Thanks in advance!

Can you explain more in depth of what you mean by “Skew”?

On the first link you can see that the after image is showed within a line that is vertical. What I would like is for it not to be vertical but rather be tilted at -25degrees. You can see which angle I mean on the 2nd share link. Does that make sense?

Oh so you want the before and after image slider to be skewed as well?

Yes,image should stay normal( not skewed) but the div block showing it should be skewed so it fits in the geometrical theme of website

Right ok… So you can achieve this using a css property called clip-path.
Add the code below in the custom code section for that page:

<style>
    .after {
  	    -webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
	    clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
     }
</style>

Hope this helps! Cheers! :slight_smile:
-Noah

It’s working, thank you very much!

1 Like