How do I represent this using CSS?

Question

How do I represent this using CSS?

Navigation

#1 by (11 votes)
#2 by (5 votes)

5

Does anyone have a clue how I can represent this using HTML and CSS? Without using absolute position, only with border or something else.

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

html css

asked by anonymous 18.11.2016 / 19:22

2 answers

5

My example with z-index .

EDIT : Incidentally, my trip does not even need z-index because it's 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>

18.11.2016 / 19:39

Tomcat boot problem Make you refresh the page and then see the message

score 11 · Accepted Answer

Very similar content to what is presented by @bacco in How to customize the side edges of a DIV? , but this uses pseudo-elements to form the 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>