Как сверстать шестиугольный тянущийся блок?

d0ublezer0

Мой дом здесь!
Регистрация
21 Май 2009
Сообщения
359
Реакции
201
Клиенту надизайнили вот такой макет. Не понимаю, как верстать.

Белую область еще примерно понимаю, как можно сделать из трёх частей. Верх и низ бордюрами по методам треугольника, центр - обычный прямоугольник. А вот золотую рамочку - как? И тянуться оно должно вертикально, завися от наполненности

Для просмотра ссылки Войди или Зарегистрируйся
Ещё занятно то, что левый край фигуры выходит за сетку. Это видно по левой границе текста.

Для просмотра ссылки Войди или Зарегистрируйся

вот что удалось сверстать

что не нравится: придется ловить значения бордюра для разных разрешений, чтобы попасть в ширину блока

ну и рамочку так и не смог запилить.

UPD: добрался до clip-path

Более-менее. но не уверен как с поддержкой браузерами. Может, есть бронебойное решение?

Для просмотра ссылки Войди или Зарегистрируйся

С рамочкой пока бессилен.
 
Последнее редактирование:
  • Нравится
Реакции: Didi

zALEHANz

Постоялец
Регистрация
26 Апр 2015
Сообщения
98
Реакции
39
Самый простой вариант - 4 png картинки, верх, низ, и боковые бордюры.
 

Didi

Постоялец
Регистрация
16 Окт 2013
Сообщения
84
Реакции
40
Интересная затея))
Я тоже сразу подумал квадрат в средине и 2 треугольника верх и низ. Вижу это уже сделано.
Насчет рамки - я думаю надо 2 треугольника один в другом, в то время когда внешний будет прозрачным.
Тоже и с квадратом (один в другом).

Теперь проблема состыковки + респонсивность:
Тут помоему нужно 3 дива (верх центр и низ) в корорых непосредственно будут наши 3 фигуры. Таким образом величина треугольников и квадрата будет вычесляться по отношению к этим контейнерам.
Единственно не уверен или получится состыковать рамку квадрата с треугольниками автоматически. Если нет - то просто работаем с заранее намеченными величинами с помощью media queries.

Не очень понял насчет "левый край фигуры выходит за сетку", покажите на скрине.

В любом случае всю эту дребедень нужно вставить в один контейнер, а его уже можно двигать как хочешь: position: absolute/relative, отрицательный margin итд..
 

d0ublezer0

Мой дом здесь!
Регистрация
21 Май 2009
Сообщения
359
Реакции
201
Самый простой вариант - 4 png картинки, верх, низ, и боковые бордюры.
Думал об этом. При масштабировании будет размазня на крупных разрешениях или неоправданно большой размер изображений. При этом пропорции масштабирования будут соблюдаться только линейно.

Единственно не уверен или получится состыковать рамку квадрата с треугольниками автоматически. Если нет - то просто работаем с заранее намеченными величинами с помощью media queries.
Опять же, это не вычисления, а подбор величин под разные разрешения. Вот у меня на маке окно открыто всегда не в полный экран. Тут не угадать.

Не очень понял насчет "левый край фигуры выходит за сетку", покажите на скрине.
Вот граница сетки:
upload_2020-8-25_19-38-14.png

В любом случае всю эту дребедень нужно вставить в один контейнер, а его уже можно двигать как хочешь: position: absolute/relative, отрицательный margin итд..
Отзывчивость в таком случае невозможна. По крайней мере, пока решения не нашел.
 

DJ PROMO

Гуру форума
Регистрация
9 Июл 2017
Сообщения
125
Реакции
57
Клиенту надизайнили вот такой макет. Не понимаю, как верстать.

Белую область еще примерно понимаю, как можно сделать из трёх частей. Верх и низ бордюрами по методам треугольника, центр - обычный прямоугольник. А вот золотую рамочку - как? И тянуться оно должно вертикально, завися от наполненности

Для просмотра ссылки Войди или Зарегистрируйся
Ещё занятно то, что левый край фигуры выходит за сетку. Это видно по левой границе текста.

Для просмотра ссылки Войди или Зарегистрируйся

вот что удалось сверстать

что не нравится: придется ловить значения бордюра для разных разрешений, чтобы попасть в ширину блока

ну и рамочку так и не смог запилить.

UPD: добрался до clip-path

Более-менее. но не уверен как с поддержкой браузерами. Может, есть бронебойное решение?

Для просмотра ссылки Войди или Зарегистрируйся

С рамочкой пока бессилен.

Ну вот так вот например: Для просмотра ссылки Войди или Зарегистрируйся
Добавить бордер слева и справа думаю проблем не составит. Тем более задать двойной бордер.)))
Так же можно задать растягивание блока от зависимостей с помощью стандартных css свойств.
 

d0ublezer0

Мой дом здесь!
Регистрация
21 Май 2009
Сообщения
359
Реакции
201
Сделал.
Обновил pen: Для просмотра ссылки Войди или Зарегистрируйся

Все же, размер фигуры получится фиксированный, но это не страшно. Можно несколько размеров для популярных разрешений выставить.

Вопрос к знатокам: насколько примененное решение стабильно?
 

Didi

Постоялец
Регистрация
16 Окт 2013
Сообщения
84
Реакции
40
Тема с SVG думаю даже получше варианта который я предлагал.
Тут только для респонсивности нужно оба шесиугольника привязать к какойто стороне или зацентрировать, так как при изменении величины каждого они разбегаются.
Думаю решение хорошее и стабильное, только все правильно разчитать для респонсивности.
 

Matysh

Создатель
Регистрация
5 Сен 2012
Сообщения
12
Реакции
1
Для просмотра ссылки Войди или Зарегистрируйся
Посмотрите на это, может чем поможет. Я использовал у себя, но вот можно ли зафигачить сюда рамку - не уверен. Хотя, если сделать два шестиугольника разных размеров, больший под меньшим...
 
Сверху