Как правильно делать такую обводку?

[purple/ocean]

Как вообще сделать, а главное как сделать правильно такую обводку блока?

[AlexZaw]

 

[Alexej]

Можно просто блок с квадратом сделать. А внутри H1 заголовок создать и от позиционировать верх как нужно.   

[AlexZaw]

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

Можно просто блок с квадратом сделать. А внутри H1 заголовок создать и от позиционировать верх как нужно.   

Тогда за ним не будет видно фона страницы

[Alexej]

1 час назад, AlexZaw сказал:

Тогда за ним не будет видно фона страницы

Во второй секции да. Я невнимательно посмотрел. Спасибо что поправили. 

[bugo_aneo]

Верстала такой шаблон и очень давно.)))
Если я правильно вас понимаю, это будет именно письмо?

Если нет - то вот вам моя верстка - разберите и забирайте на здоровье.)))

 

clean.rar

[Alexej]

 

5 часов назад, AlexZaw сказал:

Тогда за ним не будет видно фона страницы

Я тут подумал: А если bgc transparent задать заголовку ? 

[AlexZaw]

Тогда будет просвечивать верхний бордер у блока с обводкой.

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

[Alexej]

17 часов назад, AlexZaw сказал:

Тогда будет просвечивать верхний бордер у блока с обводкой.

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

Филдсет ? Я про псевдоэлементы и имел ввиду... бордеры слева снизу справа |_| а с верху: ___тут текст ____ правда как будет выглядет блок с текстом если там будет не одна строка а несколько....