html - CSS - 在动态大小的盒子之间画线

Question

我使用 CSS 创建了类似的东西。
这里的棘手之处在于，如果文本太长，框的高度可能会发生变化。

所以，我不知道如何使虚线始终以这种方式运行，因为框的大小是动态的。
（从第一个框的中间到下一个框的中间应该总是有一条线）

这是我现在使用的 HTML 和 CSS。

• 我实际上正在使用 SCSS 和 React（我正在打印“行”div 4 次）

   <div class="wrapper">
     <div class="row">
       <div class="bordered-div"></div>
       <div class="step">
         <img src="placeholder.svg" alt="img" />
         <div class="step-text">
           <div class="step-title">Title</div>
           <div class="step-description">Decsription...</div>
         </div>
       </div>
     </div>
   </div>
  
  .wrapper {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 30px;
  
   .row {
     display: flex;
     position: relative;
  
     &:last-child {
       .bordered-div {
         height: 0;
       }
     }
  
     .bordered-div {
       position: absolute;
       top: 50%;
       left: -50px;
       width: 50px;
       border-top: 1px dashed #c2c9d5;
       border-left: 1px dashed #c2c9d5;
       height: calc(100% + 30px);
     }
  
     .step {
       background: blue;
       min-height: 118px;
       width: 322px;
       padding: 20px;
       border-radius: 8px;
       display: flex;
       gap: 20px;
       filter: drop-shadow(0px 0px 4px rgba(183, 183, 183, 0.15))
         drop-shadow(0px 4px 4px rgba(217, 217, 217, 0.25));
  
       svg {
         width: 16px;
         align-self: center;
         flex: none;
       }
  
       .step-title {
         font-size: 0.875rem;
         font-weight: 600;
       }
  
       .step-description {
         font-size: 0.875rem;
       }
     }
   }
  }
  

标签： htmlcssreactjssass

Answer 1

这是一个带有最少标记的快速概念证明。
我相信你不需要任何额外的空 div。

li {
  position: relative;
  list-style: none;
  max-width: 77ch;
  background-color: #ccc;
  border-radius: 1em;
  padding: 1em;
  margin-bottom: 1em;
  z-index: 2;
}

li:before {
  content:'';
  position: absolute;
  display: block;
  height: 0px;
  width: 2em;
  top: 50%;
  left: -2em;
  border-top: 1px red dashed;
  z-index: -1;
}

li:after {
  content:'';
  position: absolute;
  display: block;
  height: calc(100% + 1em);
  width: 0px;
  top: -0.5em;
  bottom: -0.5em;
  left: -2em;
  border-left: 1px red dashed;
  z-index: -1;
}

li:first-child:after {
  top: 50%;
}

li:last-child:after {
  bottom: 50%;
}

li:first-child:after,
li:last-child:after {
  height: calc(50% + 0.5em);
} 

<ul>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae repudiandae minima, eligendi vero et eveniet magni sit facilis, dolores tempora cumque, atque deleniti dolore hic in architecto ducimus earum explicabo?</p>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae repudiandae minima, eligendi vero et eveniet magni sit facilis, dolores tempora cumque, atque deleniti dolore hic in architecto ducimus earum explicabo?</p>
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae repudiandae minima, eligendi vero et eveniet magni sit facilis, dolores tempora cumque, atque deleniti dolore hic in architecto ducimus earum explicabo?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae repudiandae minima, eligendi vero et eveniet magni sit facilis, dolores tempora cumque, atque deleniti dolore hic in architecto ducimus earum explicabo?</p>
       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae repudiandae minima, eligendi vero et eveniet magni sit facilis, dolores tempora cumque, atque deleniti dolore hic in architecto ducimus earum explicabo?</p> 
  </li>
  <li>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae repudiandae minima, eligendi vero et eveniet magni sit facilis, dolores tempora cumque, atque deleniti dolore hic in architecto ducimus earum explicabo?</p>
  </li>  
</ul>

• 首先，我before为每个li. 此伪元素用于创建水平线。我使用边框来创建虚线效果，但您可以使用线性渐变或其他任何东西。
• 然后，我after为每个li. 此伪元素用于创建垂直线。您需要调整第一个和最后一个的高度。

编辑：

在示例中， 之间的边距li是1em。
这个1em值也用在这里：

li:after {
  top: -0.5em; // <-- 1em / 2
  bottom: -0.5em; // <-- 1em / 2
}

li:first-child:after,
li:last-child:after {
  height: calc(50% + 0.5em); // <-- calc(50% - 1em / 2)
}

如果更改 之间的边距li，则应相应地更新这些值。
当你使用 sass 时，只要使用一个变量，你就会很好。