How do I represent this using CSS?

Question

Does anyone have a hint how to represent this using HTML and CSS? Without using Absolute position, just with edge or other thing.

(That would be the image of the art I want to transcribe in css)

Answer 1

Content quite similar to that presented by @ How to customize the side edges of a DIV?, but this uses pseudo-elements to form markers horizontally:

.clamp-container{
  position:relative;
  display:inline-block;
}

.clamp-text{
  margin:10px 20px;
  display:inline-block;
  text-transform: uppercase;
  font-size:40px;
}

.clamp-text:before{
  border:1px solid black;
  border-bottom-width:0;


  content: '';
  position: absolute;
  left:0px;
  right:0px;
  top:0px;
  height:3px;


}

.clamp-text:after, .clamp-text:before{
  border:1px solid black;
  content: '';
  position: absolute;
  left:0px;
  right:0px;
  height:10%;
}

.clamp-text:before{
  border-bottom-width:0;
  top:0px;
}

.clamp-text:after{
  border-top-width:0;
  bottom:0px;
}

<span class='clamp-container'><span class='clamp-text'>Empresa</span></span>

Answer 2

My example with z-index.

EDIT: by the way, my trip, nor need the z-index because it is div inside div, not two overlapping. But it works the same way.

#main {border: 2px solid darkgrey; width: 200px; padding:15px 0;font: 25px Arial;text-align:center;background:white;}
#main div {background:white;width:204px;z-index:1;position:relative;left:-2px}

<div id="main">
<div>
EMPRESA
</div>
</div>