Как сверстать заголовок с текстом, который перекрывает обводку заголовка?

Question

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

Answer 1

.out{background:white;border:2px solid #333; border-radius:10px;padding:10px;}
.text{text-transform: uppercase;font-weight:800;font-size:40px;margin:0px auto;padding:0px;text-align:left;}
.texttwo{text-transform: uppercase;font-weight:800;font-size:26px;}
.in{margin:0px auto;padding:0px;background:white;text-align:left;position:relative;bottom:45px;width:90%;box-shadow: 0px 10px 10px  10px #fff;}
.price{background:#444; color:white;}

<div>
<div class="out">
<p class="text">комплексное бухгалтерское обслуживание вашего бизнеса</p></div>
<div class="in"><p class="texttwo">В москве и области от <span class="price">10000</span> рублей в месяц</p>
</div>
</div>

Answer 2

Например, так:

.header {
  display: flex;
  flex-wrap: wrap;
  max-width: 600px;
  background: linear-gradient(to right, #fff, #eee);
  padding: 20px;
}

.title {
  border-style: solid;
  border-width: 1px 1px 0 1px;
  border-color: #999;
  border-radius: 10px 10px 0 0;
  padding: 20px;
  font-size: 200%;
}

.space-bottom-left {
  border-style: solid;
  border-width: 0 0 1px 1px;
  border-color: #999;
  border-radius: 0 0 0 10px;
  min-width: 10px;
  min-height: 10px;
  align-self: start;
}

.space-bottom-right {
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: #999;
  border-radius: 0 0 10px 0;
  min-width: 10px;
  min-height: 10px;
  align-self: start;
  flex-grow: 1;
}

.subtitle {
  padding: 0px 10px 0 10px;
  white-space: nowrap;
}

<div class="header">
  <div class="title">КОМПЛЕКСНОЕ БУХГАЛТЕРСКОЕ ОБСЛУЖИВАНИЕ ВАШЕГО БИЗНЕСА</div>
  <div class="space-bottom-left"></div>
  <div class="subtitle">В МОСКВЕ И ОБЛАСТИ ОТ 10000 РУБЛЕЙ В МЕСЯЦ</div>
  <div class="space-bottom-right"></div>
</div>

БЛОГ НА HUSL

Как сверстать заголовок с текстом, который перекрывает обводку заголовка?

Ответы (2 шт):