Slider with clip-path/mask effect at an angle
so I need to create a slider with a clip-path effect, at a 45 degrees angle. I found this one, but I’ve never used clip-path before so I have no idea on how to make the angle/if it’s possible.
here’s the fiddle with it:
https://jsfiddle.net/z01tv9mw/
.slide_next-right{ clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); position: absolute; } .slide_next-left{ clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); position: absolute; } .slide_prev-left{ clip-path: polygon(0% 0%, 0% 100%, 0% 100%, 0% 0%); transition: all 0.5s; } .slide_current-right{ clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); transition: all 0.5s; } .slide_prev-right{ clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 100% 0%); transition: all 0.5s; } .slide_current-left{ clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); transition: all 0.5s; } would love if you guys can drop some knowledge on this one, I’d like to make it slide the other way around (next image revelead from right to left, instead of left to right) and rotate this ‘clip-path’ at a 45 degrees angle (keeping the same idea, but rotated to the diagonal right bottom corner – top left corner ).
Thanks people!
