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

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

Ответ

Можно составить такую раздвигающуюся стрелку из трех компонентов: хвоста стрелки (.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; }