css - 创建与垂直线和水平线相连的 CSS 圆圈-6ren

css - 创建与垂直线和水平线相连的 CSS 圆圈

转载作者：行者123 更新时间：2023-12-01 15:32:50

我想在 CSS 中创建一个在右边和底部有线条的圆。类似下图。我找到了一个 css code水平连接圆圈。我不知道如何垂直添加线条或类似于我附加的图像？

  <!DOCTYPE html>
  <html lang="en">
      <head>
          <meta charset="utf-8">
          <style>
            @import "compass/css3";

            li {
                width: 2em;
                height: 2em;
                text-align: center;
                line-height: 2em;
                border-radius: 1em;
                background: dodgerblue;
                margin: 0 1em;
                display: inline-block;
                color: white;
                position: relative;
            }

            li::before {
                content: '';
                position: absolute;
                top: .9em;
                left: -4em;
                width: 4em;
                height: .2em;
                background: dodgerblue;
                z-index: -1;
            }

            li:first-child::before {
                display: none;
            }

            .active {
                background: dodgerblue;
            }

            .active ~ li {
                background: lightblue;
            }

            .active ~ li::before {
                background: lightblue;
            }

            body {
                font-family: sans-serif;
                padding: 2em;
            }
        </style>
     </head>
     <body>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li class="active">4</li>
             <li>5</li>
             <li>6</li>
             <li>7</li>
         </ul>
     </body>
 </html>

最佳答案

使用伪元素的组合来实现目标。

ul {
  list-style: none;
  margin: 50px;
  padding: 0;
  font: normal 16px/22px Arial;
  color: #999;
}
li {
  overflow: hidden;
  position: relative;
  padding: 0 0 10px 35px;
  }
  li::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 9px;
    width: 20px;
    height: 999px;
    border: 2px solid lightblue;
    border-width: 2px 0 0 2px;
    }
    li:last-child::before {
      border-width: 2px 0 0;
      }
  li::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid lightblue;
    border-radius: 50%;
    }
  li.current,
  li.passed {
    color: #000;
    }
    li.current::before {
      border-top-color: dodgerblue;
      }
    li.current::after {
      border-color: dodgerblue;
      background: dodgerblue;
      }
    li.passed::before,
    li.passed::after {
      border-color: dodgerblue;
      }

<ul>
  <li class="passed">Step #1</li>
  <li class="passed">Step #2</li>
  <li class="passed">Step #3</li>
  <li class="current">Step #4<br><small><i>Description of the step</i></small></li>
  <li>Step #5</li>
  <li>Step #6</li>
  <li>Step #7</li>
</ul>

参见 jsfiddle如果你愿意

关于css - 创建与垂直线和水平线相连的 CSS 圆圈，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36929965/