图片：
我想编码这个图像！
一个简单的代码:(有问题)
- .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>
