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

[d0ublezer0]

Клиенту надизайнили вот такой макет. Не понимаю, как верстать.

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

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

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

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

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

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

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

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

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

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

 

[zALEHANz]

Самый простой вариант - 4 png картинки, верх, низ, и боковые бордюры.

 

[Didi]

Интересная затея))
Я тоже сразу подумал квадрат в средине и 2 треугольника верх и низ. Вижу это уже сделано.
Насчет рамки - я думаю надо 2 треугольника один в другом, в то время когда внешний будет прозрачным.
Тоже и с квадратом (один в другом).

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

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

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

 

[d0ublezer0]

Самый простой вариант - 4 png картинки, верх, низ, и боковые бордюры.

Думал об этом. При масштабировании будет размазня на крупных разрешениях или неоправданно большой размер изображений. При этом пропорции масштабирования будут соблюдаться только линейно.

Единственно не уверен или получится состыковать рамку квадрата с треугольниками автоматически. Если нет - то просто работаем с заранее намеченными величинами с помощью media queries.

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

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

Вот граница сетки:

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

Отзывчивость в таком случае невозможна. По крайней мере, пока решения не нашел.

 

[DJ PROMO]

Клиенту надизайнили вот такой макет. Не понимаю, как верстать.

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

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

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

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

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

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

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

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

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

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

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

 

[d0ublezer0]

Сделал.
Обновил pen: Для просмотра ссылки Войди или Зарегистрируйся

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

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

 

[Didi]

Тема с SVG думаю даже получше варианта который я предлагал.
Тут только для респонсивности нужно оба шесиугольника привязать к какойто стороне или зацентрировать, так как при изменении величины каждого они разбегаются.
Думаю решение хорошее и стабильное, только все правильно разчитать для респонсивности.

 

[d0ublezer0]

при изменении величины каждого они разбегаются

Менять надо размер ограничивающего блока .prehex, тогда ничего не разбегается.

 

[Matysh]

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