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

Question

[kn1ght_t]

вот скриншот
таких "зубчатых" элементов на странице довольно много, поэтому тупо картинкой вырезать не хочется)

Comments

[kn1ght_t]

картинка не пройдет, если внимательно посмотреть на мой скриншот, видно, что элемент этот с обеих сторон проходит через графические элементы (либо рука ребенка, либо паттерн на сером фоне)

Answer 1

[teotlu]

Используйте multiple backgrounds, они поддерживаются во всех современных браузерах.
А картинки можно, как у меня, встроить прямо в CSS с помощью base64.

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

P.S. Если бы делал я, я бы спросил у дизайнера, насколько важно то, что паттерн попадает на зубчики. И если не очень важно, сместил бы его так, чтобы не попадал.

Answer 2

[Александр Флоринский]

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

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

3. Использовать SVG и clip, но это не кросбраузерное решение, IE и FF не будут поддерживать этот вариант
https://css-tricks.com/clipping-masking-css/

Comments

[teotlu]

Маски в CSS есть, но пока только для webkit-браузеров. А svg-маска работает в FF, если svg задан инлайново, а не внешним файлом :)

[Александр Флоринский]

teotlu: Надо будет попробовать. спасибо)

Answer 3

[facir]

согласен, берешь картинку 7x7 пикселей, весить она будет пару байт и заполняешь весь блок по горизонтали ))

Comments

[kn1ght_t]

не все так просто, к сожалению, в данном случае

[facir]

почему? в чем заключается проблема?

[kn1ght_t]

facir: потому что сам зубчик с любой стороны не на сплошном однотоновом фоне

[facir]

т.е. зубчик может быть поверх картинки? может сделать фон зубчиков прозрачным?)

[kn1ght_t]

facir: что?))

[Arris]

kn1ght_t: прозрачный гиф или png?

[facir]

напиши , в чем заключается проблема, если взять картинку зубчика с прозрачным фоном и заполнить ею блок?)
А лучше покажи скрин, что у тебя не выходит и как ты это хочешь сделать)
Уверен, что задача мега простая )

[facir]

gif, он меньше весит

[kn1ght_t]

Arris: вау, серьезно? facir: если этот зубчик вырезать со стороны оранжевого фона, он перекроет собой руку девочки, если со стороны серого фона, то в некоторых местах будет наложение сервых зубчиков на рисунок паттерна

Answer 4

[Валера Программист]

картинка, только картинка

Answer 5

[Ilya Korablev]

Пишите к блоку div:before, потом вставляете это как фоновое изображение, делаете repeat-x. Все просто.
Аля пример.

Answer 6

[GreatRash]

Если гонетесь за модой, то можно заюзать border-image.

Answer 7

[Игорь]

я не специалист в верстке, но мне почему то стало интересно :). Все же, как сделать на CCS я не смог придумать, но с помощью JS и без фоновых картинок как-то так:
https://jsfiddle.net/tenzb6yt/

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

Comments

[kn1ght_t]

это все замечательно, но эти желтые кружки перекроют собой картинку с рукой девочки...

[teotlu]

Это изврат какой-то. Использовать огромное количество совершенно ненужных элементов вместо того, чтобы встроить одну маленькую картинку (её можно вставить прямо в CSS с помощью base64 encoding) — так себе замена.

[Игорь]

Так я не настаиваю :). kn1ght_t в вопросе указал что, использовать картинки не хочет. Я бы конечно тоже сделал с одной картинкой, но это всего лишь вариант, как можно было бы сделать без нее. Да и 20-30 дополнительных элементов на странице - мне кажется это все же не огромное количество для современных браузеров.