kn1ght_t
@kn1ght_t

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

вот скриншот
таких "зубчатых" элементов на странице довольно много, поэтому тупо картинкой вырезать не хочется)
  • Вопрос задан
  • 473 просмотра
Решения вопроса 2
teotlu
@teotlu
Навёрстываю упущенное
Используйте multiple backgrounds, они поддерживаются во всех современных браузерах.
А картинки можно, как у меня, встроить прямо в CSS с помощью base64.

Правда, в вашем случае проблема в том, что паттерн от следующего блока попадает на эту картинку с зубчиками в некоторых местах. В таком случае для webkit-браузеров можно использовать, скажем, -webkit-mask-image, а для Mozilla — маску svg, но на мой взгляд это слишком муторно + плохо поддерживается браузерами.
Либо, как вариант, сделать оранжевые зубчики, и в нужное место на них добавить кусок руки в png. Но это тоже не очень-то удобный способ.
Пожалуй, в таком варианте проще всего сделать картинкой цельной.

P.S. Если бы делал я, я бы спросил у дизайнера, насколько важно то, что паттерн попадает на зубчики. И если не очень важно, сместил бы его так, чтобы не попадал.
Ответ написан
@flor_master
Могу верстать, могу не верстать.
Прям как на картинке сделать будет очень проблематично. Есть 3 варианта:
1. Лучше всего, убрать hceyrb, сделать так - что бы рисунок, не налезал на "зубчики" и вверху футера через псевдоэллемент пустить "зубчики" фоном с repeat-x. а дизайнеру/клиенту объяснитьб что в Html/Css нет маски.

2. Влепить весь футер большой картинкой.

3. Использовать SVG и clip, но это не кросбраузерное решение, IE и FF не будут поддерживать этот вариант
https://css-tricks.com/clipping-masking-css/
Ответ написан
Пригласить эксперта
Ответы на вопрос 6
@facir
согласен, берешь картинку 7x7 пикселей, весить она будет пару байт и заполняешь весь блок по горизонтали ))
Ответ написан
Rikcon
@Rikcon
Картинка, только не забудьте сделать спрайт из 1 зубчика и repeat-x;
Ответ написан
swipeshot
@swipeshot
Учусь на ошибках.
Пишите к блоку div:before, потом вставляете это как фоновое изображение, делаете repeat-x. Все просто.
Аля пример.
Ответ написан
@GreatRash
Если гонетесь за модой, то можно заюзать border-image.
Ответ написан
@hurgadan
я не специалист в верстке, но мне почему то стало интересно :). Все же, как сделать на CCS я не смог придумать, но с помощью JS и без фоновых картинок как-то так:
https://jsfiddle.net/tenzb6yt/

P.S.: с jquery просто потому что это быстрее написать, можно и без него
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы