Making heading staying in the middle of top border-CodePudding

I saw some designs like this and wonder if it is possible to recreate with CSS? Are there any tweaks with negative values required? Here is the code example:

<div >
 <h1> HEADING </h1>
 <dic ></div>
</div>

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-color: black;
  color: white;
 }

.square {
  width: 70%;
  height: 50%;
  background-color: red;
}

Thanks ✌️

CodePudding user response：

I've put the heading in the 'square' div so that it is relative to the 'square' div. The solution I chose was to make the heading position: absolute; and eventually I gave it top: -40px so that it peaks out. You can also use margin-top: -40px instead of position: absolute; but it's just what you prefer.

Final code:

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  color: black;
 }

.square {
  width: 70%;
  height: 50%;
  background-color: lightgray;
  display: flex;
  justify-content: center;
  position: relative;
}

.text{
  position: absolute;
  top: -40px
}

<div >
 <div > 
    <h1 >HEADING</h1>
 </div>
</div>