@vahromeevilya-widestudio

Как это сверстать, очень сложный дизайн карточки?

Добрый день! У меня появилась задача сверстать очень сложный макет, по понятным причином я не могу его весь показать.
Но могу показать вам кусочек, который в целом даст понимание о макете.

Как блок выглядит на ПК

6284cf07d07db904679051.png

И как на мобиле 320px

6284cf1784872294368794.png

Кто знает как сверстать все это дело АДАПТИВНО? Объем текста может меняться в большую и меньшую сторону

У меня были идеи реализовать это каким то образом через SVG , но похожих реализаций я не видел.
Если есть накидайте похожие реализации или концепции как это можно сделать.

UPD: Исходник карточки
  • Вопрос задан
  • 875 просмотров
Решения вопроса 1
@vahromeevilya-widestudio Автор вопроса
Всем, кто ждал...
Вот долгожданный ответ, как это было сделано мною. Тут вместе с адаптивом и некоторыми нюансами под мой проект.

https://codepen.io/vahromeevilya-widestudio/pen/ExQOWJy

Все величины в примере сделаны на REM и EM просто потому что так работает моя сборка, но все также будет отлично работать и с PX. А то что так много Брейкпоинтов - это динамическое изменение некоторых величин чтобы все классно адаптировалось.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 6
SLIDERWEB
@SLIDERWEB
ИТ-Куроводитель
В мое время дизайнерам, которые рисовали интерфейсы без оглядки на то, как это верстать потом, отрывали руки и вставляли туда, откуда у него растет голова.
Ну реально, какой-то высокохудожественной составляющей я не вижу совсем.

У меня бы ТАКОЕ умерло еще на стадии макета...
А вообще, самое простое - тремя div это собрать с бэкграундом, порезав картинку. Левая часть, верхняя часть и нижняя часть. У верхней сделать отрицательный margin а у конnертного блока bg-repeat. Но такой подход сложно будет назвать адаптивным. Куча ограничений.
Ответ написан
Aetae
@Aetae
Тлен
Два блока с border-image - один подложка, второй - заголовок.
Ответ написан
AntonLitvinenko
@AntonLitvinenko
HTML coder
Когдато в старину такие вещи делали так:
бралось картинка в png и резалась на части, так чтобы сложные элменты были на местах, а между ними тоже кусок картинки в 1 пиксель, который тянется в зависимости от количества контента
Ответ написан
Комментировать
@olser
Как помочь не знаю, но clip-path подходит для создания сложных фигур
https://bennettfeely.com/clippy/
Ответ написан
@drtvader
Вечный студент
Нижнюю часть в SVG сделать, а все что сверху через стили пробовать.
Ответ написан
Комментировать
FoxSay
@FoxSay
Для решения тебе пригодятся псевдоэлементы и clip-path, в начале я бы начал с создания блока обертки к каторому бы задал форму через clip-path даллее внутри с синий обводкой я бы разделил на три части верхняя левая и нижняя в формате svg и расположил бы так чтобы левая часть повторялась при помощи background-repeat.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы