曲线步骤图

原创已于 2024-12-29 17:54:26 修改 · 167 阅读
本内容遵循CC 4.0 BY-SA版权协议
于 2024-12-28 17:24:32 首次发布
在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .step {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 240px;
        height: 50px;
        color: #e2e2e2;
      }
      .segment {
        position: relative;
        width: 100%;
      }
      .line {
        position: absolute;
        top: 50%;
        width: 100%;
        height: 2px;
        background: #e2e2e2;
      }
      .title {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: #fff;
        border: 1px solid #e2e2e2;
        text-align: center;
        line-height: 50px;
      }

      .segment2-left-top {
        /* flex: 1; */
        position: relative;
        top: -50%;
        width: 49%;
        height: 100%;
        border: 2px solid #e2e2e2;
        border-radius: 15px 0 0 0;
        border-right: none;
        border-bottom: none;
      }

      .segment2-left-bottom {
        /* flex: 1; */
        position: relative;
        top: -50%;
        width: 49%;
        height: 100%;
        border: 2px solid #e2e2e2;
        border-radius: 0 0 0 15px;
        border-right: none;
        border-top: none;
      }
      .segment2-right-top {
        flex: 1;
        position: relative;
        top: -50%;
        width: 50%;
        height: 100%;
        border: 2px solid #e2e2e2;
        border-radius: 0 15px 0 0;
        border-left: none;
        border-bottom: none;
      }
      .segment2-right-bottom {
        flex: 1;
        position: relative;
        top: -50%;
        width: 49%;
        height: 100%;
        border: 2px solid black;
        border-radius: 0 0 15px 0;
        border-left: none;
        border-top: none;
      }

      .title1 {
        position: absolute;
        top: -100%;
        left: 50%;
        margin-left: -25px;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: #fff;
        border: 1px solid #e2e2e2;
        text-align: center;
        line-height: 50px;
        z-index: 10;
      }
      .title2 {
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -25px;
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: #fff;
        border: 1px solid #e2e2e2;

        text-align: center;
        line-height: 50px;
        z-index: 10;
      }
      .title3 {
        position: absolute;
        left: calc(100% - 50px);
        width: 50px;
        height: 50px;
        border-radius: 100%;
        background: #fff;
        border: 1px solid #e2e2e2;
        text-align: center;
        line-height: 50px;
      }
      .success {
        color: greenyellow !important;
        border-color: greenyellow !important;
      }
      .success-line {
        background: greenyellow;
      }

      .content {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 300%;
        text-align: center;
        line-height: 30px;
      }
      .content-end {
        position: absolute;
        top: 100%;
        left: -100%;
        width: 300%;
        text-align: center;
        line-height: 30px;
      }
      .content-title {
      }
      .content-desc {
        word-break: break-all;
      }

      .content-top {
        position: absolute;
        top: -200%;
        left: -100%;
        width: 300%;
        text-align: center;
        line-height: 30px;
      }

      .content-bottom {
        position: absolute;
        /* top: 200%; */
        left: -100%;
        width: 300%;
        text-align: center;
        line-height: 30px;
      }

      .current {
        color: black;
        border-color: black;
      }
    </style>
  </head>
  <body>
    <div style="display: flex; margin-top: 200px; padding: 0 50px">
      <div class="step">
        <div class="segment">
          <div class="line success-line"></div>
          <div class="title success">
            <span>1</span>
            <div class="content">
              <div class="content-ttile">开始</div>
              <div class="content-desc">desc112222xxx1111111</div>
            </div>
          </div>
        </div>
      </div>
      <div class="step">
        <div class="segment2-left-top success"></div>
        <div class="segment2-right-top success"></div>
        <div class="segment2-left-bottom success"></div>
        <div class="segment2-right-bottom success"></div>

        <div class="title1 success">
          <span>2</span>
          <div class="content-top success">
            <div class="content-ttile">test</div>
            <div class="content-desc">desc</div>
          </div>
        </div>
        <div class="title2 success">
          <span>3</span>
          <div class="content-bottom success">
            <div class="content-ttile">test</div>
            <div class="content-desc">desc</div>
          </div>
        </div>
      </div>
      <div class="step">
        <div class="segment">
          <div class="line success-line"></div>
          <div class="title3 success">
            <span>4</span>
            <div class="content-end">
              <div class="content-ttile">test</div>
              <div class="content-desc">desc</div>
            </div>
          </div>
        </div>
      </div>
      <div class="step">
        <div class="segment">
          <div class="line"></div>
          <div class="title3 current">
            <span>5</span>
            <div class="content-end">
              <div class="content-ttile">标题标题标题标题标题标题</div>
              <div class="desc">
                描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step">
        <div class="segment">
          <div class="line"></div>
          <div class="title3">
            <span>5</span>
            <div class="content-end">
              <div class="content-ttile">标题标题标题标题标题标题</div>
              <div class="desc">
                描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step">
        <div class="segment">
          <div class="line"></div>
          <div class="title3">
            <span>5</span>
            <div class="content-end">
              <div class="content-ttile">结束</div>
            </div>
          </div>
        </div>
      </div>
      <div class="step">
        <div class="segment">
          <div class="line"></div>
          <div class="title3">
            <span>5</span>
            <div class="content-end">
              <div class="content-ttile">结束</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
标签
#css #javascript #css3