在网页开发中，有时需要在两个 div 元素之间绘制一条线。可能是为了增加页面的可读性或者提高交互效果。那么如何实现这个功能呢？本文将详细介绍。
方法一：使用伪元素
可以使用 CSS 的伪元素 :before 或 :after 来实现在两个 div 之间绘制一条线的效果。具体步骤如下：
- 给父级元素设置
position: relative;属性。 - 给两个子元素分别设置
position: absolute;属性，并分别设置top: 0;和bottom: 0;（或者左右）属性，使它们位于父级元素的顶部和底部（或者左侧和右侧）。 - 给第一个子元素设置
right: 50%;（或者 left），给第二个子元素设置left: 50%;（或者 right），使它们分别位于父级元素的左右两侧。 - 使用伪元素
:before或:after给父级元素添加一条竖直（或者水平）的线段。设置content: "";、position: absolute;、height: 100%;（或者 width）、background-color: #000;（或者其他颜色）属性，使它们位于两个子元素之间。
示例代码如下：
<div class="parent"> <div class="child1"></div> <div class="child2"></div> </div>
-- -------------------- ---- ------- ------- - --------- --------- - -------- ------- - --------- --------- ---- -- ------- -- - ------- - ------ ---- - ------- - ----- ---- - --------------- - -------- --- --------- --------- ------- ----- ------ ---- ----------------- ----- ------ ---- -
效果如下：
方法二：使用 SVG
另一种实现在两个 div 之间绘制一条线的方法是使用 SVG。具体步骤如下：
- 在父级元素中添加一个 SVG 元素。
- 给 SVG 元素设置
position: absolute;和z-index: -1;属性，并设置其宽度和高度为父级元素的宽度和高度。 - 在 SVG 元素中添加一个路径元素（
<path>），并设置其d属性，使其绘制一条连接两个子元素的线段。
示例代码如下：
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<svg class="line" xmlns="http://www.w3.org/2000/svg">
<path d="M 50% 0 V 100%" stroke="#000" stroke-width="1"/>
</svg>
</div>-- -------------------- ---- ------- ------- - --------- --------- - ----- - --------- --------- -------- --- ------ ----- ------- ----- -
效果如下：
总结
本文介绍了两种在两个 div 元素之间绘制一条线的方法：使用 CSS 的伪元素和使用 SVG。这两种方法各有优缺点，开发者可以根据实际需求选择适合自己的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30082