CSS：如何将2个点与边界线连接

问题描述

我正在尝试通过CSS将2个点与一条线连接起来。尝试了几次但没有得到。

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>

试图实现以下目标

解决方法

如果要连续线，可以使用线性渐变在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)将选择第四个孩子，从第一个孩子开始-即所有顺序：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 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>

,

我在它们之间添加了一个自定义跨度，其类为fileService.getShareMetadata(shareName,function (error,result,response) { 。放置该线，使其从一个点的右侧到下一个点的左侧。由于这行移至该div之外，因此我已从您的line类中删除了overflow: hidden。我为Rtable-cell类添加了z-index: 2; position: relative;，以将dot放在line之后。

无论您给出的线宽值是多少，左边的值始终必须为50％，这将使线在中心精确地对齐。线的其余宽度将自动根据线的边缘进行调整。

希望这对您有用。

dot

$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;
}

,

像这样吗？

*,::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>