如何用线将两个div连接起来？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用线将两个div连接起来？相关的知识，希望对你有一定的参考价值。
我正在使用flexbox创建这样的药丸导航/向导系统：
.wizard-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.pill {
background: orange;
padding: 3px 15px;
color: white;
margin: 0;
display: inline-block;
border-radius: 10px;
}
.connector {
display: inline-block;
background: orange;
height: 7px;
flex-grow: 1;
}<div class="wizard-container">
<div class="pill">Hello</div>
<div class="connector"></div>
<div class="pill">Beautiful</div>
<div class="connector"></div>
<div class="pill">World</div>
</div>您可能会看到，当缩小视口时，flexbox垂直包裹.pill元素，但是.connector元素保持水平，坦白地看起来很丑。我可以编写一个媒体查询来将它们display: none删除，但是我想知道是否有可能让它们绘制一条蛇形路径（从上方药丸的右侧开始，到下方药丸的左侧结束）？
答案
我会使用伪元素以不同的方式执行此操作，并且当元素包装时，连接器将消失。您可以将垂直链接作为奖励来保持链接。
.wizard-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
overflow:hidden; /* This one is important */
}
.pill {
background: orange;
padding: 3px 15px;
color: white;
border-radius: 10px;
font-size:25px;
position:relative;
margin:0 0 10px;
}
.pill:before {
content:"";
position:absolute;
z-index:-1;
right:100%;
height:7px;
top:50%;
transform:translateY(-50%);
width:100vw;
background:inherit;
}
.pill:after {
content:"";
position:absolute;
z-index:-1;
bottom:100%;
width:7px;
left:40px;
height:100vh;
background:inherit;
}<div class="wizard-container">
<div class="pill">Hello</div>
<div class="pill">Beautiful</div>
<div class="pill">World</div>
</div>以上是关于如何用线将两个div连接起来？的主要内容，如果未能解决你的问题，请参考以下文章