-Code eine andere Struktur in css

Question

Das Bild:

Ich möchte dieses Bild kodieren!

Ein einfacher Code: (mit 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

Sie können einen Hack tun Pseudo-Elemente auf diese Weise mit -

.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

Das ist mein Ansatz: http://codepen.io/anon/pen/vOvNdK

I 4 erstellt div Elemente in der LBRT Reihenfolge: das erste Element (die linke vertikale bar) überlappt die letzten (die oberen horizontalen Balken) in dem oben links Quer dank ein :before Pseudoelement auf dem angelegten linke vertikale Leiste.

Alle Größen und Offsets sind in relativen Einheiten, so dass Sie einfach die gesamte Zeichnung vergrößern oder verkleinern können, indem Sie einfach die Größe des übergeordneten Elements ändern.

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; 
} 

---

Ergebnis