Как реализовать такой элемент?

Question

[Гриша Никольский]

Здравствуйте. Как можно реализовать такой элемент для прокрутки слайдера? Или лучше просто картинкой вставить?

Answer 1

[Андрей Верх]

Для основного контейнера с белым фоном:
transform:skewX(20deg)

Для вложенной стрелки:
transform:skewX(-20deg)

Answer 2

[dom1n1k]

Да, просто картинкой лучше (если сторонних передовых технологий - svg). Проще и практичнее.

А гении, которые к месту и не к месту (второе - чаще) суют трансформации, вряд ли ответят на пару простых вопросов:
1. Как сделать так, чтобы сам блочок наклонился, но стрелка в нём осталась ровной? (Скорее всего, дальше последуют идеи с помещением стрелки в before/after, но кому оно надо?)
2. Как потом в этом искаженном блоке высчитывать координаты, если будет нужно иконку отцентрировать точно до пикселя? (Хотя "как" оно-то понятно, непонятно "нафига")
3. Что делать, если завтра этой кнопке захочется дать, например, окантовку?
4. Как избавиться от неаккуратного антиалиасинга по диагональной стороне блока в некоторых браузерах? (Трансформации применяются уже к растровому изображению и потому дают не очень качественную картинку).

Comments

[Андрей Верх]

Проще но не практичнее. Картинка не позволит изменить ширину, высоту, цвет, форму, анимации...Плюс лишний запрос к серверу.

[dom1n1k]

1. Размеры и положение картинки прекрасно меняются через CSS и JS, если это будет нужно.
2. Цвет и тому подобное - как раз более удобно и естественно меняется на картинке. Потому что просто экспортируешь из графредактора и всё - не заморачиваясь мысленными пересчетами формы и координат.
3. Есть спрайты, base64, инлайн svg - вариантов море.

Вижу выше апдейт про обратный наклон стрелки. Это костыль костылевич:
- проблемы с её точным позиционированием
- замыливание контуров от двойного пересчета растра туда-сюда
- нужен вложенный элемент

[Андрей Верх]

dom1n1k:
Озвученные пункты, просто смех. Но я вас не собираюсь пытаться переубедить, так что используйте картинки.

Апдейт сделал только потому, что у ТС может возникнуть такой вопрос. Можно делать и более сложные конструкции с before и after.