Code of another structure in css

Question

Picture:

I want to encode this image!

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 crack 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 LBRT order: the first element (left vertical strip) overlaps the last (upper horizontal strip) in the upper left cross thanks to the applied :before pseudo-element to the left vertical strip.

All sizes and offsets are in relative units, so you can easily enlarge (or reduce) the entire picture by simply resizing 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