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

Question

[Василь Бойко]

Comments

[gleendo]

Правильней будет связать дизайнера который рисовал это, закрыть в подвале, избить его, заставить сверстать такое, если справится то отпустить, не справится, то...одним дизайнером будет меньше.

Когда же они все таки научаться верстать. А то рисуют и не думают как потом это все верстать...

[Сергей Меньщиков]

Согласен, совершенно нет и малейшего понимания у дизайнера как воплотить такую верстку.

[Сергей delphinpro]

iamevg_, за дизайнерами числится много косяков, за которые пытать нужно, но в данном дизайне я не вижу ничего такого. Уровень не для начинающего, но сверстать можно.
Я люблю такие макеты. Но это редкость =)

[Сергей delphinpro]

Кстати, Василь Бойко, не могли бы вы скинуть мне этот макет? Я бы с удовольствием размял мозги на досуге =) Почта в профиле.

[Владислав Лысков]

интересно, как дизайнер представляет себе это на моб. устройствах

[Flur]

Владислав Лысков, всё просто) меняешь все на прямоугольные и в ряд. Профит

[Дмитрий Pacification]

Можно и мне исходничек? Очень интересно такое попробовать сверстать

[Милок Мурлыка]

А мне можно исходник? ( [e-mail] )

[Дмитрий]

Можно и мне скинуть? Тряхнуть старяной хочется и сверстать что-то крутое и красивое!.. )

[Alexander]

Мне тоже, если можно, почта в профиле. Спасибо! :)

[Владислав Петренко]

Будьте добры и мне исходник ([e-mail]) . Спасибо!

[HealSpirit]

Василь Бойко, и мне, пожалуйста, исходник на [e-mail] Спасибо!

[snovazabilparol]

Василь Бойко я тоже не откажусь от исходника. [e-mail] спасибо!

[Mikhail Derkach]

[e-mail] - буду благодарен за исходник, потренируюсь)

[mydarck]

я и есть исходник [e-mail]

[Виолетта Морозова]

А кривая красная обводка - это часть дизайна или вы просто обвели элементы?

[yadren]

Будьте добры и мне исходник, если это возможно. [e-mail]

Answer 1

[Aleksey Solovyev]

Ничего сложного не вижу в верстке. Запарная, но вполне реализуемая. Чего в комментариях ноет народ? Или Вам интересно 3 блока в ряд flex'ом закидать - "Ху*к-ху*к, и в продакшн"?
Делим на три блока: светлый, текст по центру, темный блок. Текст через shapes форматируем, форму каждого блок через clip-path, svg... Позиционируем чуть-чуть(много). Получаем итог. Ну a с нижней все понятно - transparent: skew, clip-path...

Вот хороший пример shapes - https://www.sarasoueidan.com/blog/css-shapes/
clip-path - https://developer.mozilla.org/en-US/docs/Web/CSS/c...

А мобильную пусть кидает макет дизайнер. Или он на полпути оставил Вас?

ps с поддержкой надо поиграть, но тоже ничего такого....
psps скинь макет. Ночью будет свободное время - сделаю.

Comments

[Максим]

здесь очень много svg , просто на взгляд

[DTX]

Народ ноет потому, что ни clip-path, ни css-shapes не кроссбраузерны.

[DTX]

с поддержкой надо поиграть, но тоже ничего такого....

Как быть с css-shapes в лисе и осле?

[Aleksey Solovyev]

И? Голова у Вас зачем на плечах? clip-path у нас единственный способ? Ну сделайте скриншот макета и картинкой все отдайте, если у Вас нет других идей... SVG, маски, беграундом. да залейте все канвасом на худой конец....

[DTX]

Aleksey Solovyev, кроме clip-path я способов не знаю, потому и спрашиваю.
Интересует, как правильно стоит такое делать.
С помощью SVG можно сделать такой текст?
https://i.imgur.com/d4voCl2.png
Или хотя бы такой?
https://i.imgur.com/QhEiO8o.png

Что за маски?

Про отдачу текста в виде картинки, надеюсь, была шутка.

[Vest]

DTX, если я правильно понимаю, то ответ такой: https://stackoverflow.com/questions/25582834/text-... , но там старый комментарий.
Другой старый пост - tavmjong.free.fr/blog/?p=938 . Надо посмотреть как отработает: shape-inside.
Я не проверял, поэтому у меня всего лишь комментарий :)

[DTX]

Vest, с foreignObject примеров я не нашёл.
shape-inside/outside не работает в ie/edge. Ни даже в лисе (не проверял), судя по caniuse

[DTX]

Aleksey Solovyev, запал пропал?

Answer 2

[Максим Дудин]

Для верстки блоков нестандартной формы можно использовать css свойство clip-path

Comments

[Сергей Меньщиков]

Только поддержка этого свойства оставляет желать лучшего

[Максим Дудин]

Сергей Меньщиков, ну да, не универсальное решение

Answer 3

[s-jet]

Вырезать png, не парится и сэкономить свое время и деньги. ИМХО никому не нужны заморочки со статическими страницами типа "визитка"

Comments

[xXRustamXx]

С таким подходом можно идти в дизайнеры.

[s-jet]

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

Answer 4

[Виталий]

на счет clip-path & SVG, может кому-то пригодиться. https://github.com/andrusieczko/clip-path-polygon

Answer 5

[Антон]

Transform Skew