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

[d0ublezer0]

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

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

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

https://codepen.io/d0ublezer0/pen/bGpqgKY

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

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

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

 

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

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

https://codepen.io/d0ublezer0/pen/qBZrrEb

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

Edited August 25, 2020 by d0ublezer0

[npofopr]

Бронебойное, только картинка, как мне кажется. А текст внутри ограничивать по высоте. чтобы всегда был в рамках блока. Ну я бы его в любом случае ограничивал. 

[d0ublezer0]

Сделал.

Обновил pen: https://codepen.io/d0ublezer0/pen/bGpqgKY

 

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

 

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

Edited August 26, 2020 by d0ublezer0

[klierik]

2 часа назад, d0ublezer0 сказал:

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

Ровно на столько на сколько оно поддерживается браузерами: https://caniuse.com/#feat=css-clip-path

Существуют более надёжное решение для создания шестиугольной фигуры: http://brenna.github.io/csshexagon/

Но в Ваше случае, раз уж используете для рамки SVG, то намного проще и универсальнее использовать 1 SVG и для рамки и для фона.

[d0ublezer0]

40 минут назад, klierik сказал:

Существуют более надёжное решение для создания шестиугольной фигуры: http://brenna.github.io/csshexagon/

Да, пожалуй, перемудрил я с clip-path для однотонного шестиугольника с зафиксированным размером. 

40 минут назад, klierik сказал:

Но в Ваше случае, раз уж используете для рамки SVG, то намного проще и универсальнее использовать 1 SVG и для рамки и для фона.

Вот тут не соглашусь - при масштабировании одного SVG расстояние от рамки до фона будет изменяться, что недопустимо.

Edited August 26, 2020 by d0ublezer0