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>

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

Not possible with this HTML structure, you'll need to cut a horizontal element in two pieces with separate z-index. — GreyRoofPigeon
– GreyRoofPigeon, Commented Jul 31, 2015 at 10:50
@danialdezfooli css-tricks.com/almanac/selectors/a/after-and-before — Siddharth Thevaril
– Siddharth Thevaril, Commented Jul 31, 2015 at 11:11

Siddharth Thevaril · Accepted Answer · 2015-07-31 11:30:23Z

2

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>

edited Jul 31, 2015 at 11:30

answered Jul 31, 2015 at 10:59

Siddharth Thevaril

3,7883 gold badges40 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user663031 Over a year ago

There is no such thing as a "pseudo-selector". I guess you mean "pseudo-element".

Fabrizio Calderan · Accepted Answer · 2015-07-31 11:35:22Z

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

Collectives™ on Stack Overflow

Code a different structure in css

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related