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

Question

[warcevil]

Как сверстать эти блоки адаптивно и возможно ли это? По картинкам:

1) Картинка с кнопкой: непонятно, как сделать так, чтобы я был уверен, что стрелки не вылезут за края. Думаю их только абсолютно позиционировать возможно, но тогда они запросто могут обрезаться. Как возможно это исключить?

2) Цитата с болтиками: болтики думаю отдельно как before и after сделать, но как сделать эту обводку, как на макете? Если делать background, то конечно получается деформированная картинка..

3) Title "Почему лучший?": Тоже самое.. чисто background не получится, потому что деформироваться начинает.

4) Человечек: Тоже самое, что и со стрелочками у кнопки. Непонятно как обеспечить, чтобы облако не вылезало за страницу.

Comments

[Ярослав Иванов]

А почему вы собираетесь думать за дизайнера ? Пусть дезингер и думает как.

[Nwton]

Хорошего дЕзайнера видно из далека...

[warcevil]

ок, с вылезкой элементов за контэйнер да, может быть дизайнер должен думать об этом. Но как сделать к примеру рамку с болтиками или ленту "Почему лучший?". Эти блоки я хочу сделать полностью адаптивными. Т.е. чтобы можно было не париться сколько текста вставлять и они нормальное расширялись.

Answer 1

[Nwton]

1) Придется делать как в старые добрые времена, когда не все браузеры поддерживали round border:2) По поводу стрелочек. Проверяй js влезают ли они полностью, если да - оставляй, иначе - display: none. Хотя не думаю, что если часть не влезет, то это будет катастрофа.
3) Если экран узкий, устанавливай альтернативное облако со стрелкой вверху под человечком. Иначе - как на макете.

Answer 2

[Givandos]

Первые 3 без особых проблем делаются порезкой фоновой картинки на части.
Вторую вообще в мобильной версии оставить без стрелочек, не нужны они на узкой экране.

А вот с облачком, то тут действительно должен думать дизайнер как сделать так, чтоб конкретно это расположение чувачка и облачка смотрелось в размере 300 пикселей по ширине. А так как это практически нереально (будет очень мелко и все детали потеряются), то дизайнер должен придумать как чувачка и облако "разделить" и отображать немного по другому их компоновку в мобильной версии (на узких экранах).

Answer 3

[Ankhena]

warcevil:
1. Рамка с болтиками можно сделать с помощью border-image, болтики через before и after или позиционированием bg. (Второй вариант лично мне нравится больше)
2. Блок со стрелками я бы делала через display:flex и сами стрелки фоном contain
3. Аналогично background-size: contain. Размер шрифта либо считать через vw либо изменять в точках перелома макета.

Comments

[Сергей delphinpro]

1. Зачем псевдоэлементы если использовать border-image? Нарезать рамку как показал Nwton и всё )

[Ankhena]

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

[Сергей delphinpro]

Ankhena W: Толщина бордера всё равно будет определяться угловыми элементами.

[Ankhena]

Сергей: Да, пожалуйста, нравится включить болтики в рамку, никто не мешает. Я ж не стучу кулаками: делайте болтики отдельными элементами. И не вижу остального макета, нужны ли они там отдельные.
:)

[warcevil]

Спасибо за совет с border image.. Там действительно с болтами без проблем рамка делается, так что супер

[Сергей delphinpro]

warcevil: Только не забывайте что IE10 не понимает это свойство

[Ankhena]

warcevil: ну если надо ИЕ10, то придется разрезать на части и делать множественный bg