Блог

Главная - Вопросы по программированию - Css: как соединить 2 точки линией границы

Css: как соединить 2 точки линией границы

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я пытаюсь соединить 2 точки линией через 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>

пытаюсь достичь следующего

введите описание изображения здесь

Ответ №1:

Если вам нужна непрерывная линия, вы можете использовать линейный градиент для создания линии в качестве фона на 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.

ОБНОВЛЕНИЕ: Чтобы добавить пробел между точками и линией, вы можете добавить границу к точке:

 .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>

Комментарии:

1. Спасибо за ответ. Возможно ли удалить линию за пределами точек и некоторое пространство до их начала и окончания, как показано на рисунке выше.

2. @Raphael Вы можете добавить пробел между точкой и линией — я обновил свой ответ для этого. Поскольку он использует линейный градиент, я не могу придумать способ удалить строку с обоих концов без изменения HTML. Это вариант?

Ответ №2:

Я добавил пользовательский интервал с классом line между ними. Расположите линию так, чтобы она проходила от правой части одной точки к левой части следующей. Я удалился overflow: hidden из вашего Rtable-cell класса, так как эта строка выходит за пределы этого div. Я добавил z-index: 2; position: relative; для dot класса, чтобы расположить line за dot .

Какое бы значение ширины линии вы ни указали, левое всегда должно составлять 50%, это точно выровняет линию по центру. Остальная ширина линии будет автоматически скорректирована по краю линии.

Надеюсь, это сработает для вас.

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

Комментарии:

1. спасибо за ответ. возможно ли выделить некоторое пространство между началом и концом строки, как показано на рисунке выше

2. @Raphael вы можете добавить пробел в betwwn до желаемого уровня, уменьшив ширину линии.

3. Спасибо, Нитиш, в моей настройке все работает отлично.

Ответ №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>

Комментарии:

1. спасибо за ответ. можно ли удалить линии за пределами 3 точек?