Как сделать, чтобы элементы внутри блока перекрывали бордер?

Question

[Oslar]

ВОТ код

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

Тем самым, как сделать так же стрелочку сверху, при том что фон не однотонный

Comments

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

Где ваш код?

[Oslar]

Ярослав Иванов, извините( Добавил в описание код

[Сергей Горячев]

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

[Oslar]

Сергей Горячев, я вообще не знаю как такое сделать, знаю что есть метод fieldset, но как мне известно, такого эффекта он дать не может, а других вариантов я не знаю, по-этому обратился сюда за помощью

[Сергей delphinpro]

вот только что шесть часов назад давал пример https://jsfiddle.net/r8tb3ewy/1/

[Сергей Горячев]

Сергей delphinpro, ну, тут посложнее пример-то)

[HamSter]

codepen как-то давно делала такой пример, хотя он тоже далек от макета в вопросе, но суть в том что массово применяются псевдоэлементы :before, :after для обводки.
Либо попробовать svg, потому как еще и закругленные углы.
Но чтобы пробелы прозрачными ... , вроде, прогресс css не до шел еще к сожалению.

[Сергей Горячев]

HamSter, я тоже решал подобное через псевдоэлементы.
Хотя реально было бы проще пятью свгшками. Их, конечно тоже загонять в псевдики, но их было бы меньше.
Закругление не заметил, оно очень мелкое(

[Сергей delphinpro]

Сергей Горячев,

ну, тут посложнее пример-то)

Да не важно, принципы те же.

Answer 1

[Сергей Горячев]

Но руки дизайнеру я бы вырвал...

Comments

[Oslar]

Полностью с тобой согласен, на счет дизайнера!

Answer 2

[HamSter]

Примерно так:

CodePen

Но для адаптивности, все же, наверное, стоит разделить svg.

Answer 3

[nevidimk0]

Можно попробовать как-нибудь так.
jsfiddle.net/hr3sy9cf

Comments

[Сергей Горячев]

Оно же отличается от макета от слова "совсем".

[nevidimk0]

Сергей Горячев, потому что это попытка предложить подход к реализации данной задачи, а не делание за человека его работы.

[Сергей Горячев]

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