Как соединить 2 блока в 1 и убрать часть border?

Question

[MdaUZH]

Всем привет, уже были подобные вопросы, но внутри небыло текста, что более проще...

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

?

Answer 1

[BohdanK]

Просто так, бордерами вы не сделаете, либо нужно добавить третий вспомогательный блок (ниже на картинке), либо добавить к блоку, который вверху слева, псевдокласс ::after и с помощью него скрыть границу, то есть зарисовать таким же цветом, как и фон страницы. Но тогда верхний блок должен быть фиксированной высоты.


Вот такой вариант с псевдоэлементом: https://jsfiddle.net/cchnc6t7/

Answer 2

[Павел Воронюк]

codepen.io/anon/pen/MybrXW

Answer 3

[L0k1]

Было более проще, а вы хотите более лучше?...

Покажите как вы делали, и вам подскажут где вы ошибаетесь. Или вы хотите, чтобы кто-то просто за вас что-то сделал?

Comments

[MdaUZH]

https://jsfiddle.net/yznkqf94/

Единственное, нужно текст разместить выше, как я понял абсолютным позиционированием. но н уверен что все верно

[L0k1]

https://jsfiddle.net/yznkqf94/1/

Answer 4

[Web Developer Blog]

можете попробовать

border-top, border-bottom, border-right,border-left