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>
..............
A CSS rule consists of a selector and a declaration block. The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
Each declaration includes a CSS property name and a value, separated by a colon. Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces. p is a selector in CSS (it points to the HTML element you want to style: <p>).
CSS Syntax The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.
At its most basic level, CSS consists of two components: Properties: These are human-readable identifiers that indicate which stylistic features you want to modify. For example, font-size, width, background-color. Values: Each property is assigned a value. This value indicates how to style the property.
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>
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With