Как лучше сверстать подобный слайдер?

#css #css3

Саму анимацию то сделать не трудно, вот только стрелки эти, как сделать?

    

Ответы

Ответ 1

Можно составить такую раздвигающуюся стрелку из трех компонентов: хвоста стрелки
(.arrow__left), раздвигающейся части (.arrow__center) и острия стрелки (.arrow__right).
Центральная часть изначально будет нулевой ширины, при наведении ширина будет увеличиваться.
Хвост и остриё обрезать при помощи свойства clip-path. Только обратите внимание на
ограниченную поддержку этого свойства браузерами, для фоллбека рекомендую использовать
@supports.



.arrow {
  display: flex;
}

.arrow__left {
  width: 100px;
  height: 400px;
  background-image: url(http://i.imgur.com/vt1Bu3m.jpg);
  clip-path: polygon(0% 0%, 100% 50%, 0 100%, 100% 100%, 100% 0);
}

.arrow__right {
  width: 100px;
  height: 400px;
  background-image: url(http://i.imgur.com/vt1Bu3m.jpg);
  background-position: -100px 0;
  transition: all .2s;
  clip-path: polygon(0% 0%, 100% 50%, 0 100%);
}

.arrow__center {
  background-image: url(http://i.imgur.com/vt1Bu3m.jpg);
  background-position: -100px 0;
  width: 0;
  transition: width .2s;
}

.arrow:hover .arrow__center {
  width: 400px;
}

.arrow:hover .arrow__right {
  background-position: -500px 0;
}