Слайдер с эффектом обтравки / маски под углом - PullRequest
Новая
       97

Слайдер с эффектом обтравки / маски под углом

0 голосов
/ 13 июля 2020

, поэтому мне нужно создать слайдер с эффектом траектории под углом 45 градусов. Я нашел это, но я никогда раньше не использовал clip-path, поэтому понятия не имею, как сделать угол /, если это возможно.

вот скрипка с ним:

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;
}

были бы рады, если бы вы, ребята, могли поделиться некоторыми знаниями об этом, я бы хотел, чтобы он скользил наоборот (следующее изображение показано справа налево , а не слева направо) и поверните эту «траекторию отсечения» на угол 45 градусов (сохраняя ту же идею, но повернутую в диагональный правый нижний угол - верхний левый угол).

Спасибо, люди!

...