在 css 中编码不同的结构

Question

图片：

我要对这张图片进行编码！

一个简单的代码：（有问题）

.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>

.......

Answer 1

您可以通过这种方式使用伪元素进行破解 -

.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>

Answer 2

这是我的方法：http://codepen.io/anon/pen/vOvNdK

我按 LBRT 的顺序创建了 4 个 div 元素：第一个元素（左边的垂直条）与 顶部的最后一个元素（顶部的水平条）重叠-left 交叉归功于应用于左侧垂直条的 :before 伪元素。

所有尺寸和偏移量均采用相对单位，因此您只需更改父元素的尺寸即可轻松放大（或缩小）整个绘图。

标记

<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;
}

结果

在 css 中编码不同的结构

Code a different structure in css

css

structure