在圆圈之间画线css [英] Draw lines between circles css

问题描述

我正在尝试在圆圈之间画线，我有这个代码 https://codepen.io/cfmorales/pen/qBEqGpr，在某种程度上它是有效的，但是当你调整页面大小时，线条的高度与圆圈不匹配，我有什么想法可以让它响应吗?所有的魔法都在 :before

td:nth-child(2) {垂直对齐:基线；}td:nth-child(1) {显示:弹性；对齐内容:居中；右边距:28px；宽度:42px；高度:42px；边框:1px 实心 #999999;边界半径:100%；文本对齐:居中；保证金底部:31%；位置:相对；}t >TD:第一个孩子:之前{内容: '';位置:绝对；背景:#BFBFBF；高度:26px；宽度:1px；顶部:100%；左:50%；变换:translateX(-50%);}tr:最后一个孩子>TD:第一个孩子:之前{显示:无；}跨度 {垂直对齐:中间；颜色:#999999；字体系列:游乐场展示"；字体大小:24px；行高:32px；文本对齐:居中；}

<tr><td><span>1</span></td><td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó> una galería de textos y los mezcló de</td></tr><tr><td><span>2</span></td><td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezclemó de simplelésumeltexto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó> una galería de textos y los mezcló de</td></tr><tr><td><span>3</span></td><td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó> una galería de textos y los mezcló de</td></tr><tr><td><span>4</span></td><td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó> una galería de textos y los mezcló de</td></tr><tr><td><span>5</span></td><td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó> una galería de textos y los mezcló de</td></tr></tbody><p></p>

解决方案

我用 div 替换了你的表格.

我在这里做了一些 CSS 魔法.

• 这条线只是一个左边框.

• 圆圈是一个 ::before 伪元素.

• 每个 ::before 元素中都有一个计数器.

• 我还使用了 CSS 变量，因此可以更轻松地更新多个元素.

• 我猜你不希望最后一个元素有一行，所以我用 :not(:last-child) 来阻止这种情况发生.

:root {--圆圈大小:42px；--间距:28px；--文本颜色:#999；}.容器 {反复位:部分；填充顶部:var(--spacing);padding-left: var(--spacing);}.container >div {位置:相对；填充:calc(2 * var(--spacing));填充顶部:0px；颜色:var(--text-color);字体系列:游乐场展示"；字体大小:24px；行高:32px；}.container >div:not(:last-child) {左边框:1px 实心；}.container >div::before {反增量:节；内容:计数器(节)；位置:绝对；左:0px；顶部:-4px；变换:translateX(-50%);宽度:var(--circle-size);高度:var(--circle-size);显示:弹性；对齐内容:居中；对齐项目:居中；边框:1px 实心 var(--text-color);边界半径:50%；背景颜色:白色；}

<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezclemó de simplelésumeltexto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de<div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto.Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de

I'm trying to draw lines between circles, i have this code https://codepen.io/cfmorales/pen/qBEqGpr, in some way it works but when you resize the page the height of the line doesnt match to the circle, any ideas of how can i make it responsive? all the magic is in the :before

td:nth-child(2) {
            vertical-align: baseline;
          }

          td:nth-child(1) {
            display: flex;
            justify-content: center;
            margin-right: 28px;
            width: 42px;
            height: 42px;
            border: 1px solid #999999;
            border-radius: 100%;
            text-align: center;
            margin-bottom: 31%;
            position: relative;
          }
          tr > td:first-child:before { 
            content: '';
            position: absolute;
            background: #BFBFBF;
            height: 26px;
            width: 1px;
            top: 100%;
            left: 50%;
            transform: translateX(-50%);
        
          }
          tr:last-child > td:first-child:before {
            display: none;
     
          }

          span {
            vertical-align: middle;
            color: #999999;
            font-family: "Playfair Display";
            font-size: 24px;
            line-height: 32px;
            text-align: center;
          }

<table class="table_1">
  <tbody>
    <tr>
      <td><span>1</span></td>
      <td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
    <tr>
      <td><span>2</span></td>
      <td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
    <tr>
      <td><span>3</span></td>
      <td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
    <tr>
      <td><span>4</span></td>
      <td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
    <tr>
      <td><span>5</span></td>
      <td><span>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</span></td>
    </tr>
  </tbody>
</table>
<p></p>

解决方案

I replaced your table with divs.

I did some CSS magic here.

• The line is just a border-left.

• The circle is a ::before pseudo-element.

• Each ::before element has a counter in it.

• I also used CSS variables so it's easier to update several elements.

• I guessed that you didn't want the last element to have a line, so I used :not(:last-child) to stop that from happening.

:root {
  --circle-size: 42px;
  --spacing: 28px;
  --text-color: #999;
}

.container {
  counter-reset: section;
  padding-top: var(--spacing);
  padding-left: var(--spacing);
}

.container > div {
  position: relative;
  padding: calc(2 * var(--spacing));
  padding-top: 0px;
  
  color: var(--text-color);
  font-family: "Playfair Display";
  font-size: 24px;
  line-height: 32px;
}

.container > div:not(:last-child) {
  border-left: 1px solid;
}

.container > div::before {
  counter-increment: section;
  content: counter(section);
  position: absolute;
  left: 0px;
  top: -4px;

  transform: translateX(-50%);
  
  width: var(--circle-size);
  height: var(--circle-size);
  
  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid var(--text-color);
  border-radius: 50%;
  background-color: white;
}

<div class="container">
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal mLorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
  <div>Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal m</div>
</div>

这篇关于在圆圈之间画线css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！