Как сделать гибко ( чтобы можно было менять только иконки)?

Question

[olya_097]

исключительно с помощью css...

Comments

[Rustam Bainazarov]

Ну, как вы меняете фоновые рисунки у блоков, LOL? Вот-вот.

[olya_097]

Рустам Байназаров, не совсем поняла ответ
речь о вырезе
значит я некоректно задала вопрос
извините

[Rustam Bainazarov]

olya_097, другое дело. Вставьте фон через base64 или просто ссылкой на фон. Какая у вас разметка текущая?

[olya_097]

Рустам Байназаров, https://jsfiddle.net/u8j7koLn/1/

[Rustam Bainazarov]

olya_097, ну для .item сделайте картинку на фон вместо цвета.

[olya_097]

Рустам Байназаров, сказали - это слишком тут

[Rustam Bainazarov]

olya_097, в плане слишком? Кто сказал? В чём проблема иметь картинку со сложной формой на фоне блока? Сервер упадёт от 1 кб картинки (которую к тому же можно зашить в CSS)?

Можете передать тому, кто это сказал, что он сказал колоссальную ерунду.

[olya_097]

Рустам Байназаров, на работе)
сказали тут не мегасложная форма

[Rustam Bainazarov]

olya_097, так себе у вас контора, значит, скажу вам честно.

Что border-radius, что clip-path (без маски) не дадут качественного результата. Будет лишь похоже, но далеко от идеала в плане формы. Из мухи делают слона у вас на работе, дело на 1 минуту, пипец.

[olya_097]

Рустам Байназаров, ну вроде похоже https://codepen.io/Olya097/pen/dyoezoG

Answer 1

[Антон]

https://jsfiddle.net/y31beu6d/

Answer 2

[Арсений Матыцин]

1. Border-radius — форма для него слишком сложная, но неправильную форму можно им сделать. Может и это выйдет при должном подходе.
2. Clip-path (у него проблемы с поддержкой)
3. Svg маска.
4. Обрезанный по шаблону gif\png\svg (самый валидный вариант)