在两个div之间画线
时间: 2024-01-21 22:17:55 浏览: 25
你可以使用CSS的伪元素 `::before` 和 `::after` 来实现在两个div之间画线的效果。具体实现方式如下:
HTML代码:
```html
<div class="box1"></div>
<div class="box2"></div>
```
CSS代码:
```css
.box1 {
width: 100px;
height: 100px;
background-color: #F9D9D9;
}
.box2 {
width: 100px;
height: 100px;
background-color: #C6E2FF;
}
.box1::after {
content: "";
position: absolute;
top: 50%;
left: 100px;
width: 30px;
height: 1px;
background-color: black;
transform: translateY(-50%);
}
.box2::before {
content: "";
position: absolute;
top: 50%;
left: -30px;
width: 30px;
height: 1px;
background-color: black;
transform: translateY(-50%);
}
```
上述代码中,我们使用 `::after` 伪元素在 `.box1` 元素的右边画了一条黑色直线,并使用 `::before` 伪元素在 `.box2` 元素的左边画了一条黑色直线,从而实现了在两个div之间画线的效果。
你可以根据实际需求调整线条的位置、颜色和长度等属性。