Ни чего не крассивогов этом не вижу, у меня на это сайте так сделано citrus.qsb.su
Да и вообще всегда и везде так делаю. Обычная практика, и очень удобно.
KrisIris: или скрипптом, или в ручную в иллюстраторе можно посмотреть.
Сразу прошу прощение на разъяснения на русском, но у меня иллюстратор русский, всё ни как руки не доходят сменить язык.
И так, идём во вкладку "Окно"это в главном верхнем меню. И там активируем "Информация о документе".
В появившемся окне жмём поставьте галочку "объекты".
Теперь когда выделяете кривую,можете видеть её длину.
Artem Yur'evich: ну начнём с того, что тот, кто вы писали в прошлом сообщение это вы.
Так как такие вещи как на скрине делаются как раз таки тенями, градиенты здесь не уместны, к тому же ещё и растровые. Тем более что человек как раз таки попросил на CSS, думаю он и без вас знает что это можно сделать картинкой.
kotey: плюсы по моему очевдны)
Почитать про SVG можете по запросу в гугл - "SVG в HTML" или что-то типа того.
Что бы делать такие штуки SVG толком то и знать не нужно, просто рисуете в иллюстраторе нужные вам фигуры, заливаете градиентом или чем вам угодно, и сохраняете в формате SVG.
я бы на svg делал, гараздо проще.
В илюстраторе обрисовал дома, создал нужные фигуры, сохранил фигуры в svg вставил сразу в код сайта и готово.
И не нужно ни каких скриптов и прочей хероты
Ну ссылка на гайде это не решение вопроса, я вроде бы знаю не плохо flex, но по этому сюда и написал, что не доходит до меня, как же сделать такую сетку.
Вот максимум что получается: https://jsfiddle.net/RadCor/gzhjf68w/
Я бы не советовал так конкатенировать классы.
Потом когда будите через время редактировать код, задолбаетесь искать нужные классы.
Уже не раз обжигался так, теперь только полное название классов пишу)