本文已参与「新人创作礼」活动，一起开启掘金创作之路。

效果图

思路

通过奇偶性绑定不同的样式让其边框线为

如何实现呢？

直接给盒子设置边框是不可行的
因为后续盒子中放置的内容是居中且宽度固定而开头的线框其宽度为50px(防止线重叠) 所以给盒子设置伪元素来实现

      .start::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 100%;
        border-bottom-left-radius: 50px;
        border-left: 1px solid #9a9a9a;
        border-bottom: 1px solid #9a9a9a;
      }

      .odd::after {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        width: calc(100% - 49px);
        height: 100%;
        border-bottom-right-radius: 50px;
        border-top-right-radius: 50px;
        border-top: 1px solid #9a9a9a;
        border-right: 1px solid #9a9a9a;
        border-bottom: 1px solid #9a9a9a;
      }

      .even::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 100%;
        border-bottom-left-radius: 50px;
        border-top-left-radius: 50px;
        border-top: 1px solid #9a9a9a;
        border-left: 1px solid #9a9a9a;
        border-bottom: 1px solid #9a9a9a;
      }

      .ending::after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 100%;
        border-top-left-radius: 50px;
        border-top: 1px solid #9a9a9a;
        border-left: 1px solid #9a9a9a;
      }

思路确定后让盒子垂直拼接结果开头顺利连接其余处都未连接成功把线框加宽后便能看出原因了

其原因是：伪元素盒子的box-sizing默认值为content-box 导致设置的width与height仅包括内容的宽和高，不包括边框（border），内边距（padding），外边距（margin）。
所以得给伪元素添加样式 box-sizing: border-box;

box-sizing: border-box能让width 和 height属性包括内容，内边距和边框，但不包括外边距。

但此时盒子的线框还是没有顺利连接得让盒子的边框叠到上一个盒子上面也就是给盒子设置负边框margin-top: -5px;

这样一个蛇形时间轴就实现了完整代码如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蛇形时间轴的实现</title>
    <style>
      body {
        margin: 100px 0 0 1000px;
        background-color: antiquewhite;
      }
      div {
        width: 200px;
        height: 150px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        margin-top: -1px;
      }
      .start::after {
        content: "";
        position: absolute;
        box-sizing: border-box;
        left: 0;
        top: 0;
        width: 50px;
        height: 100%;
        border-bottom-left-radius: 50px;
        border-left: 1px solid #9a9a9a;
        border-bottom: 1px solid #9a9a9a;
        margin:0 ;
      }

      .odd::after {
        content: "";
        position: absolute;
         box-sizing: border-box;
        right: 0;
        top: 0;
        width: calc(100% - 49px);
        height: 100%;
        border-bottom-right-radius: 50px;
        border-top-right-radius: 50px;
        border-top: 1px solid #9a9a9a;
        border-right: 1px solid #9a9a9a;
        border-bottom: 1px solid #9a9a9a;
      }

      .even::after {
        content: "";
        position: absolute;
         box-sizing: border-box;
        left: 0;
        top: 0;
        width: 50px;
        height: 100%;
        border-bottom-left-radius: 50px;
        border-top-left-radius: 50px;
        border-top: 1px solid #9a9a9a;
        border-left: 1px solid #9a9a9a;
        border-bottom: 1px solid #9a9a9a;
      }

      .ending::after {
        content: "";
        position: absolute;
         box-sizing: border-box;
        left: 0;
        top: 0;
        width: 50px;
        height: 100%;
        border-top-left-radius: 50px;
        border-top: 1px solid #9a9a9a;
        border-left: 1px solid #9a9a9a;
      }
    </style>
  </head>
  <body>
        <div class="start">开头</div>
        <div class="odd">奇</div>
        <div class="even">偶</div>
        <div class="odd">奇</div>
        <div class="ending">结尾</div>
  </body>
</html>

所在层次所想到的解决方法欢迎各位大佬指点