[分享]css两个div连线

CSS是一种广泛使用的样式表语言，它可以控制HTML文档中的元素样式。 在这篇文章中，我们将探讨如何使用CSS将两个div进行连接。 .container { : relative; width...

CSS是一种广泛使用的样式表语言，它可以控制HTML文档中的元素样式。 在这篇文章中，我们将探讨如何使用CSS将两个div进行连接。

<div class="container">
  <div class="rect1"></div>
  <div class="rect2"></div>
</div>

.container {
  position: relative;
  width: 500px;
  height: 500px;
}

.rect1 {
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;
  top: 50px;
  left: 50px;
  z-index: 1;
}

.rect2 {
  position: absolute;
  width: 100px;
  height: 100px;
  background: blue;
  top: 150px;
  left: 150px;
  z-index: -1;
}

.rect1::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100px;
  background: red;
  top: -50px;
  left: 50px;
  z-index: -1;
  transform: rotate(45deg);
}

.rect2::before {
  content: "";
  position: absolute;
  width: 3px;
  height: 100px;
  background: red;
  top: 50px;
  left: -50px;
  z-index: 1;
  transform: rotate(45deg);
} 

这个示例中有两个