Как сверстать только средствами css эту картинку?

Question

[zebralaska]

Как сверстать только средствами css (без применения скриптов) эту картинку?

Answer 1

[Игорь]

ща попробую сделать дать линк

Верстка заняла 1,5 часа:
CSS

Векторизация заняла 3 минуты:
Вектор

Каким методом пользоваться решать вам
если хотите поддержки на мобильных добавьте префексы.

Comments

[zebralaska]

Очень крутая работа, не думал что так все сложно. Я даже не могу в сайт это вставить - верстка едет. Много теперь параметров нужно изменить, чтобы вставить сюда? autob-u-msk.ru

[Игорь]

zebralaska: а зачем вам через css это делать?

[Игорь]

можно сделать чтобы норм встало у вас на сайте,но зачем через цсс

[zebralaska]

Игорь Николаевич: можно и не через css

[zebralaska]

Игорь Николаевич: только как???

[Игорь]

zebralaska: https://jsfiddle.net/j1awce9s/

[zebralaska]

вот это да!!! А куда это вставить-имеет значение?

[Игорь]

zebralaska: нет, это уже самостоятельный объект.,куда хотите туда и вставляйте.Но если четкость граней не устроит можно поиграть с классами чтобы мой первый вариант у вас заработал

[zebralaska]

Игорь Николаевич: Это в основной файл php вставлять? У меня весь код сайта меньше по размеру)))

[Игорь]

zebralaska: если в шапку сайта хотите то найдите у себя див с классом .art-logo-jpg и в <а> сюда svg вставьте а> prntscr.com/a0kv0a

[zebralaska]

Игорь Николаевич: Да я хотел чтобы она не на всю шапку была а вместо существующего логотипа встала. Размер картинки получился на всю шапку.

[Игорь]

zebralaska: #Layer_1{
width: 200px;
height:200px;
} в цсс это вставьте,этим правилом вы свг размер указываете

[zebralaska]

Игорь Николаевич: качество хорошее только при приближении. А вот в 1-м способе хорошее, но с настройкой наверное сложнее!

[zebralaska]

Игорь Николаевич: в способе "Вектор" как будто волосинки какие-то на рисунке

[zebralaska]

Игорь Николаевич: Кстати в вашем скрине в к-м вы нарисовали куда вставить код svg под логотипом нет надписи городской автовыкуп. В вашем браузере не отображается?

[Игорь]

zebralaska: вк ваш дайте я туда отпишу

[zebralaska]

Игорь Николаевич: https://vk.com/autovykup77

[Aleksandr]

Игорь Николаевич Объясните мне, как рисуется svg?

[Игорь]

Александр Котов: линни ,заливка,строки

[Aleksandr]

Игорь Николаевич: про это я читал) никак не могу понять как рисуются такие сложные штуки :(

[Игорь]

Александр Котов: иллюстратором,что там сложного,ели если вы имели ввиду как сими линни распологаеются на холсте то тут тоже нет ничо сложного

Answer 2

[тостер хабрович]

на css получится слишком дорого
проще переписать с нуля

Comments

[Игорь]

1,5 часа работы)))

Answer 3

[Влад Скляренко]

чем canvas или svg плохи?

Comments

[Игорь]

может афтор для саморазвития)

[Влад Скляренко]

на transform-ах и градиентах далеко не уедешь) Да и для саморазвития, наверное, лучше самому попробовать.

[Игорь]

Влад Скляренко: по твоему в этом примере с градиентом и трансформ не добиться такого результата?
Я кстати уже делаю это.
чуть позже линк дам

[Влад Скляренко]

Добиться, но усеченные края усложняют код и количество элементов) Canvas-ом все в 20 строк уместится)

[Игорь]

prntscr.com/a02ofc
пока такой результат,работаю дальше.

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

[Игорь]

prntscr.com/a02s1c

[Игорь]

prntscr.com/a039d4

[zebralaska]

Игорь Николаевич: вот это мастерство! А код не подскажете?

[Игорь]

prntscr.com/a03cw3

[Игорь]

zebralaska: у меня отдельный ответ у вас в вопросе чуть выше посмотрите там линк.
Если хотите могу и объяснить что атм да как.

[Влад Скляренко]

Игорь Николаевич: Слишком много мороки, но славно получилось

Answer 4

[Павел Волынцев]

Через CSS эту картинку сделать можно, но все размеры указать в px
Если потребуется изменить размер, то фактически нужно будет делать новую картинку

Более гибкий вариант с SVG
Размер можно менять через CSS
codepen.io/copist/pen/gPQqQE

(javascript только для того, чтобы показать - как будет выглядеть в разных размерах)

Comments

[zebralaska]

А без ява скрипта нельзя?

[Павел Волынцев]

zebralaska: Нужна только картинка в формате SVG <img src="copi.st/QiCQ" width="50px"/> а остальное - для интерактивности. Обновил свой пример на CodePen