在css中编写不同的结构

图像：

我想编码这个图像

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

.hr{
位置：相对位置；
高度：100px；
背景：ddd；
明确两者；
边缘顶部：100px；
}
.vr{
位置：绝对位置；
宽度：100px；
高度：900px；
背景：#000；
顶部：-300px；
z指数：-1
}

---

您可以通过以下方式使用伪元素进行黑客攻击-

.hr{
位置：相对位置；
高度：100px；
背景：ddd；
明确两者；
边缘顶部：100px；
}
.vr{
位置：绝对位置；
宽度：100px；
高度：900px；
背景：#000；
顶部：-300px；
z指数：-1
}
.下：之后{
内容：''；
位置：绝对位置；
顶部：0px；
左：100px；
宽度：100px；
高度：100px；
背景色：黑色；
}

这是我的方法：

我按

LBRT

顺序创建了4个

div

元素：第一个元素（左垂直条）与左上十字中的最后一个元素（顶部水平条）重叠，这要归功于应用于左垂直条的

：before

伪元素

所有大小和偏移都是以相对单位表示的，因此只要更改父元素的大小，就可以轻松地放大（或缩小）整个图形

标记

<div class="draw">
  <div class="v1"></div>
  <div class="h2"></div>
  <div class="v2"></div>
  <div class="h1"></div>
</div>

---

结果

---

使用此HTML结构不可能，您需要使用单独的z索引将水平元素分成两部分。或者您可以使用伪选择器？伪选择器？你的意思是在之后、之前吗？@Danialdezzouni@Danialdezzouni我迟到了，但我也回答了。：）没有所谓的“伪选择器”。我猜你的意思是“伪元素”。

<div class="draw">
  <div class="v1"></div>
  <div class="h2"></div>
  <div class="v2"></div>
  <div class="h1"></div>
</div>

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