将方形div与圆形div无缝连接
将方形div与圆形div无缝连接
提问于 2017-06-19 00:37:02
我构建了一个有"steps“的进度条，它由一个条(一个div)连接。正如在照片中看到的，我需要让酒吧无缝地加入到每个“步骤”中。有没有办法做到这一点？例如，通过::before和::after，而不引入一些严重的定位黑客？
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-06-19 01:13:25
您可以创建比每个圆之间的间距稍长一点的:after伪元素，然后定位它，使其位于左右两个圆的下方。
如果边距为20px，那么您可以创建每行44px，例如，并设置right: 2px，以便在两侧的圆圈下有2px of line。
ul {
display: flex;
font-size: 20px;
list-style: none;
}
li {
width: 70px;
height: 70px;
border-radius: 50%;
background: lightblue;
position: relative;
line-height: 70px;
text-align: center;
margin: 0 20px;
}
li:not(:last-child):after {
content: '';
height: 15px;
width: 44px;
background: green;
position: absolute;
top: 50%;
right: 2px;
transform: translate(100%, -50%);
z-index: -1;
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
Stack Overflow用户
发布于 2017-06-19 01:24:17
像这样的东西？上色是需要更多关注的东西。
.container {
display: table;
margin: 5px 0 0 5px;
border: thin solid gray;
background: linear-gradient(to right, #3f4c6b 0%,#c675c1 100%);
}
.bar-side {
vertical-align: middle;
display: table-cell;
width: 50px;
height: 100px;
}
.bar-middle {
vertical-align: middle;
display: table-cell;
width: 100px;
height: 100px;
}
.bar {
height: 30px;
width: 100%;
background-color: transparent;
border: thin solid darkgray;
display: inline-block;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: thin solid darkgray;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 50px;
}<div class="container">
<div class="bar-side">
<div class="bar"></div>
</div>
<div class="circle">2</div>
<div class="bar-middle">
<div class="bar"></div>
</div>
<div class="circle">3</div>
<div class="bar-side">
<div class="bar"></div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44617196
复制相关文章
相似问题
腾讯云开发者
