Streaming live at 10am (PST)

After/before skewed effect


#1

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!


#2

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


#3

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?


#4

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


#5

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


#6

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


#7

It’s working, thank you very much!