Как сверстать такой блок?

Question

[Виталий]

Доброго времени суток! Помогите сообразить как сверстать блоки с обриваемыми линиями на неоднородном фоне.

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

Comments

[Ульрих]

В народе поговаривают, что можно через браузер посмотреть код CSS

[Виталий]

Ульрих, А в народе не поговаривают, что сайты верстаются с psd?

Answer 1

[Rid]

https://codepen.io/riddirect/pen/MEjjjo

Comments

[Виталий]

Спасибо большое очень помогли :)

Answer 2

[Lumore]

https://codepen.io/Lumore/pen/NarQJg

Comments

[Александр]

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

Answer 3

[Александр]

Кусочек с иконкой в качестве svg, справа дополнять div'ом всё оставшееся пространство, слева, снизу, справа видимо обычный border

Answer 4

[Максим]

а обычный стандартный :

<fieldset>
<legend>ваш текст</legend>
</fieldset>

не подходит ?

Comments

[itsjustmypage]

Несемантично