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

255

04 марта 2017, 03:50

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

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

<div class=arrow> 
  <div class=arrow__left> 
   
  </div> 
  <div class=arrow__center> 
   
  </div> 
  <div class=arrow__right> 
 
  </div> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

опять проблемы с MySQL

Отказывается Запускаться

312

MySQL

Как правильно подобрать типы полей?

Создал таблицу со следующими характеристиками (смскрин)

289

MySQL

Mysql привести 2 столбца к единому идентификатору

Есть таблица сообщений вида:

298

MySQL

Ввод данных в таблицу

Имеются 3 таблицы:

285