Paradoxical effect for HTML <div>s using CSS

css, css-position, html, positioning

Solution

WORKING DEMO :before

senario:

Using only one pseudo-element `:before` you just need to set `border-top` and `border-right` then give it an absolute position on the bottom left of `div2`

With the same HTML code as OP all you need is a Pseudo-element `:before` or `:after` combine witn z-index. To make it easy i put numbers in your HTML.

Note: you habe to set position relative to the element with the `pseudo`, the set the top border and the right border you can skeep that using box-shadow too see WORKING DEMO WITH BOX-SHADOW.

HTML

<div class="box1">1
</div>
<div class="box2">2
</div>
<div class="box3">3
</div>
<div class="box4">4
</div>

CSS

div{
height:100px;
width:100px; 
border:solid 1px;
}

.box1{
position:relative;
left:500px;
background-color:#00d8ff;
z-index:3;
}

.box2{
position:relative;
left:570px;
top:-30px;
background-color:#f6ff00;
z-index: 3;
}
.box2:before{
content: '';
position: absolute;
bottom: -2px;
left: -2px;
width: 32px;
height: 30px;
border-top: 1px solid black;
border-right: 1px solid black;
z-index: 14;
background-color: #ff69fa;
}
.box3{
position:relative;
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;    
}

.box4{
position:relative;
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}

WORKING DEMO WITH BOX-SHADOW

Here you just need to change the `width` and `height` of `.box2`.

senario:

you choose one `div` in my case `div2` you don't set the background-color then reset the the borders `border:none;` .

Since you have set `div` width, height and position relative you can now set `:before` and 'after' width a 100% width and 50% height, one on the top and the other on the bottom, then for `:before` set `border-top` and for `:after` set `border-bottom`.

Now set for both of then `border-left` and `border-right`.

div{
height:100px;
width:100px; 
border:solid 1px;
position:relative;
}

.box1{
left:500px;
background-color:#00d8ff;
z-index:3;
}

.box2{
left:570px;
top:-30px;
border:none;
}
.box2:before,.box2:after{
content: '';
position: absolute;   
background-color:#f6ff00;
width: 100%;
height: 50%;
left: 0;
border-left:1px solid black;
border-right:1px solid black;
}
.box2:before{
top: 0;
z-index: 3;
border-top:1px solid black;
}
.box2:after{
bottom: 0;
z-index: 0;
border-bottom:1px solid black;
}
.box3{
left:500px;
top:-60px;
background-color:#ff69fa;
z-index:1;    
}

.box4{
left:430px;
top:-230px;
background-color:#24ff00;
z-index:2;
}

WORKING DEMO :BEFORE :AFTER FLEXIBLE

Problem

I am stuck here. Please help. I want to make the following through css. But when I use CSS positioning, I am getting this output The fourth(GREEN) layer should go under first layer(BLUE) which is not happening. This is the code I used. HTML: ``` <div class="box1"> </div> <div class="box2"> </div> <div class="box3"> </div> <div class="box4"> </div> ``` CSS: ``` div{ height:100px; width:100px; border:solid 1px; } .box1{ position:relative; left:500px; background-color:#00d8ff; } .box2{ position:relative; left:570px; top:-30px; background-color:#f6ff00; } .box3{ position:relative; left:500px; top:-60px; background-color:#ff69fa; } .box4{ position:relative; left:430px; top:-230px; background-color:#24ff00; } ``` JSFiddle: http://jsfiddle.net/rkubs/ Even I tried to use Z-index. But no use. Help me. Thanks in advance.

Original source

Related problems