Парадоксальный эффект для HTML <div> s с использованием CSS

Я застрял здесь. Пожалуйста помоги. Я хочу сделать следующее через css.

Но когда я использую позиционирование CSS, я получаю этот вывод

Четвертый (ЗЕЛЕНЫЙ) слой должен идти под первым слоем (BLUE), которого не происходит. Это код, который я использовал.

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/

Даже я пытался использовать Z-индекс. Но бесполезно. Помоги мне. Заранее спасибо.

Ответ 1

РАБОЧИЙ ДЕМО: до

senario:

Используя только один псевдоэлемент :before, вам просто нужно установить border-top и border-right, затем дать ему абсолютное положение в левом нижнем углу div2

С тем же кодом HTML, что и все, что вам нужно, это Pseudo-element :before или :after объединить witn z-index. Чтобы упростить, я помещаю номера в свой HTML.

Примечание: вы можете установить положение относительно элемента с помощью pseudo, установить верхнюю границу и правая граница вы можете скрыть это, используя 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;
}

РАБОЧАЯ ДЕМО С КОРОБКОЙ SHOWOW

Здесь вам просто нужно изменить width и height на .box2.

senario:

вы выбираете один div в моем случае div2, вы не устанавливаете фоновый цвет, а затем reset границы border:none;.

Поскольку вы установили div ширину, высоту и относительную позицию, теперь вы можете установить ширину :before и 'after' шириной 100% и высотой 50%, одну сверху, а другую внизу, затем для :before установите border-top и для :after установите border-bottom.

Теперь установите для обоих из них border-left и 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;
}

РАБОЧИЙ ДЕМО: ДО: ПОСЛЕ ГИБКИЙ

Ответ 2

Я не уверен, что вы можете сделать это обычным способом, немного взломать может быть помощь.

Что я делаю, это добавить еще один квадрат прямо под .box1 с z-index выше всех и с размером 50% от родителя.

HTML:

<div class="box1">
    <div class="box1-fake"></div>
</div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>

CSS

.box1-fake{
    background-color:#00d8ff;
    position:absolute;
    left: -1px;
    top: -1px;
    z-index: 1000;
    width: 50%;
    border-right: 0 none;
}

Ответ 3

Вы можете использовать clip на псевдоэлементе после первого окна, чтобы получить это:

.box1:after {
    content: "";
    border:solid 1px;
    background: #00d8ff;
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: -1px;
    left: -1px;
    clip: rect(76px 32px 102px -1px);
}

FIDDLE

Для получения дополнительной информации о свойствах css-клипа см. эта страница mozilla

Он также имеет кросс-браузерную поддержку

Ответ 4

Разделите левый квадрат на две части, верхнюю и нижнюю секцию и соответственно присвойте z-индексы.

Ответ 5

Как насчет somethign вот так:

<div class="box2">
<div class="box-top"></div> 
<div class="box-bot"></div>
</div>

## css ##

.box2 {
position: relative;
left: 570px;
top: -30px;
border: none;
}

.box-top {
z-index: 200;
position: relative;
border-bottom: none;
height: 50%;
background-color: #f6ff00;
}

.box-bot{
z-index: 200;
/* position: relative; */
left: 570px;
border-top: none;
height: 50%;
background-color: #f6ff00;
}

http://jsfiddle.net/a8fXP/30/