Code a different structure in css

Question

The image:

I want to code this image!

A simple code: (with problem)

.hr{
  position:relative;
  height:100px;
  background : #ddd;
  clear both;
  margin-top: 100px ;
}
.vr{
  position:absolute;
  width:100px;
  height:900px;
  background : #000;
  top:-300px;
  z-index:-1
}


<div class='hr' style=''><div class='vr' style='left:100px;'></div><div class='vr' style='right:100px;z-index:0'></div></div>
<div class='hr' style=''></div>

..............

Answer 1

You can do a hack using pseudo elements this way -

.hr{
  position:relative;
  height:100px;
  background : #ddd;
  clear both;
  margin-top: 100px ;
}
.vr{
  position:absolute;
  width:100px;
  height:900px;
  background : #000;
  top:-300px;
  z-index:-1
}

.bottom:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 100px;
    width: 100px;
    height: 100px;
    background-color: black;
}

<div class='hr' style=''>
  <div class='vr' style='left:100px;'></div>
  <div class='vr' style='right:100px;z-index:0'></div>
</div>
<div class='hr bottom' style=''></div>

Answer 2

This is my approach: http://codepen.io/anon/pen/vOvNdK

I created 4 div elements in the LBRT order: the first element (the left vertical bar) overlaps the last one (the top horizontal bar) in the top-left cross thanks to a :before pseudoelement applied to the left vertical bar.

All the sizes and offsets are in relative units, so you could easily scale up (or down) the whole draw simply changing the size of the parent element.

Markup

<div class="draw">
  <div class="v1"></div>
  <div class="h2"></div>
  <div class="v2"></div>
  <div class="h1"></div>
</div>

CSS

.draw { 
  position: relative; 
  width: 400px;
  height: 400px;
  border: 1px #ccc dashed;
}

.draw div { position: absolute; }

.draw div[class^="h"] {
  height: 20%;
  width: 100%;
  left: 0;
  background: #d8d8d8;
}

.draw div[class^="v"] {
  height: 100%;
  width: 20%;
  top: 0;
  background: #212121;
}

.draw .h1 { top : 20%; }
.draw .h2 { top : 60%; }
.draw .v1 { left : 20%; }
.draw .v2 { left : 60%; }

.draw .v1:before { 
  position: inherit;
  z-index: 2;
  top: 20%;
  left: 0;
  width: 100%;
  height: 20%;
  content: "";
  background: inherit;
}

---

Result