图片：
我想编码这个图像！
一个简单的代码:(有问题)
.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>
…………..
解决方法
你可以用这种方式使用伪元素进行破解 –
.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>
