Css：如何用边框线连接 2 个点

Question

我试图通过 css 用一条线连接这两个点。 尝试了几个但没有得到它。

https://codepen.io/diasraphael/pen/NWNYgdX

<div class="Rtable Rtable--4cols">
 <div style="order:0;" class="Rtable-cell">
  <span class="dot"></span>
 </div>
 <div style="order:1;" class="Rtable-cell"><div>India</div></div>
 <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div>
 <div style="order:0;" class="Rtable-cell">
  <span class="dot"></span>
 </div>
 <div style="order:1;" class="Rtable-cell"><div>Japan</div></div>
 <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div>
 <div style="order:0;" class="Rtable-cell">
  <span class="dot"></span>
 </div>
 <div style="order:1;" class="Rtable-cell"><div>United states</div></div>
 <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div>
 <div style="order:0;" class="Rtable-cell">
  <span class="dot"></span>
 </div>
 <div style="order:1;" class="Rtable-cell"><div>Israel</div></div>
 <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div>
</div>

试图实现以下目标

Answer 1

我添加了一个自定义跨度，它们之间有类line 。 定位线，使其从一个点的右侧部分到下一个点的左侧部分。 我已经删除了overflow: hidden从你的Rtable-cell类中，因为这条线移到了那个 div 之外。 我添加了z-index: 2; position: relative; z-index: 2; position: relative; 为dot类安排dot后面的line 。

无论您给出的线宽值是多少，左侧必须始终为 50%，Ths 将使线完全对齐在中心。 线的其余部分将自动调整我的线的边距。

希望这对你有用。

 $bw: 3px; @mixin Rtable-cell--light { background-color: white; border-color: mix(white,red,80%); } .Rtable { display: flex; flex-wrap: wrap; padding: 0; } .Rtable-cell { box-sizing: border-box; flex-grow: 1; width: 100%; // Default to full width padding: 0.8em 0.2em; // overflow: hidden; // Or flex might break list-style: none; background: fade(green,20%); text-align: center; } .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; display: inline-block; z-index: 2; position: relative; } /* Table column sizing ================================== */ .Rtable--2cols > .Rtable-cell { width: 50%; } .Rtable--3cols > .Rtable-cell { width: 33.33%; } .Rtable--4cols > .Rtable-cell { width: 25%; } .Rtable--5cols > .Rtable-cell { width: 20%; } .Rtable--6cols > .Rtable-cell { width: 16.6%; } .Rtable--7cols > .Rtable-cell { width: 14.2%; } .Rtable--8cols > .Rtable-cell { width: 12.5%; } .Rtable--9cols > .Rtable-cell { width: 11.1%; } .Rtable { position: relative; //top: $bw; left: $bw; //compensate for border offset } .Rtable-cell { @include Rtable-cell--light; } .line { width: 70%; height: 2px; display: block; position: relative; background: blue; top: -16px; left: 50%; margin: 0 auto; }

 <div class="Rtable Rtable--4cols"> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> <span class="line"></span> </div> <div style="order:1;" class="Rtable-cell"><div>India</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> <span class="line"></span> </div> <div style="order:1;" class="Rtable-cell"><div>Japan</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> <span class="line"></span> </div> <div style="order:1;" class="Rtable-cell"><div>United states</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>Israel</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> </div>

Answer 2

如果你想要一条连续的线，你可以使用线性渐变在Rtable-cell div 上创建一条线作为背景。

div.Rtable-cell:nth-child(3n+1){
   background: linear-gradient(to bottom, white 46%, red 46% 49%, white 49%);
  /* or for a thicker line: */
   background: linear-gradient(to bottom, white 40%, red 40% 50%, white 50%);
}

nth-child(3n+1)将选择从第一个开始的每 4 个孩子 - 即所有订单：0 div。

更新：要在点和线之间添加空间，您可以为点添加边框：

.dot { border: 10px solid white; /* REST OF your CSS */ }

（仅供参考，你的.dot是一个内联块，所以它下面有额外的空间，所以它在Rtable-cell没有完全垂直居中。我把这条线稍微高于中心以使其看起来居中。）

工作示例：

 .Rtable { display: flex; flex-wrap: wrap; padding: 0; } .Rtable-cell { box-sizing: border-box; flex-grow: 1; width: 100%; padding: 0.8em 0.2em; overflow: hidden; list-style: none; background: fade(green,20%); text-align: center; } .dot { height: 25px; width: 25px; background-color: #bbb; border-radius: 50%; border: 10px solid white; display: inline-block; } /* Table column sizing ================================== */ .Rtable--2cols > .Rtable-cell { width: 50%; } .Rtable--3cols > .Rtable-cell { width: 33.33%; } .Rtable--4cols > .Rtable-cell { width: 25%; } .Rtable--5cols > .Rtable-cell { width: 20%; } .Rtable--6cols > .Rtable-cell { width: 16.6%; } .Rtable--7cols > .Rtable-cell { width: 14.2%; } .Rtable--8cols > .Rtable-cell { width: 12.5%; } .Rtable--9cols > .Rtable-cell { width: 11.1%; } .Rtable { position: relative; //top: $bw; left: $bw; //compensate for border offset } .Rtable-cell { @include Rtable-cell--light; } div.Rtable-cell:nth-child(3n+1){ background: linear-gradient(to bottom, white 46%, red 46% 49%, white 49%); }

 <div class="Rtable Rtable--4cols"> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>India</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>Japan</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>United states</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> <div style="order:0;" class="Rtable-cell"> <span class="dot"></span> </div> <div style="order:1;" class="Rtable-cell"><div>Israel</div></div> <div style="order:2;" class="Rtable-cell">06.07.1988 - 05:15</div> </div>

Answer 3

像这样的东西？

 *, ::after, ::before { box-sizing: border-box; } .dot { width: 40px; height: 40px; background-color: red; border-radius: 100em; box-shadow: 0 0 0 16px #fff; } .d { display: flex; justify-content: space-evenly; margin-top: 80px; border-top: 2px solid red; } .d .dot { position: relative; top: calc(((40px / 2) + (2px / 2)) * -1); }

 <div class="d"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div>