如何根据附图创建边框

Question

伪边框图像

我想要连接复选框的边框。

我尝试使用伪边框，但在设置高度时遇到困难，因为网站响应不同的屏幕。

任何人都可以建议一种方法来处理响应式屏幕。

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}
.parent {
  border-left: 3px dashed black;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.child {
  display: flex;
  flex-direction: column;
}

input {
  width: 2rem;
  height: 2rem;
}

.child input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4rem;
}

.child input::before {
  content: '';
  position: absolute;
  left: -4rem;
  border: 2px dashed black;
  width: 100%;
}

<div class="parent">
    <div>
      <input type="checkbox" />
      <div class="child">
        <input type="checkbox">
        <input type="checkbox" />

      </div>
    </div>
  </div>

Answer 1

尝试以这种方式使用

border-style: dashed

和

::before

伪元素：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
}

div {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: center;
  border: 3px solid black;
  border-style: dashed;
  height: 10rem;
  width: 10rem;
}

input {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2rem;
  height: 2rem;
  margin-left: 4rem;
}

input::before {
  content: '';
  position: absolute;
  left: -4rem;
  border: 2px solid black;
  border-style: dashed;
  width: 60px;
}

<div>
  <input type="checkbox" />
  <input type="checkbox" />
</div>