css3凹角和虚线样式

---

如图所示

布局采用上下分成两个li标签来做

//凹角样式
li:nth-child(1)::before,
li:nth-child(2)::before,
li:nth-child(1)::after,
li:nth-child(2)::after {
      content: "";
      width: 0.2rem;
      height: 0.2rem;
      background-color: inherit;
      background-color: #F0FDFC;
      position: absolute;
      z-index: 10;
      box-sizing: border-box;
}

li:nth-child(1)::before {
      border-radius: 0 100% 0 0;
      left: 0px;
      bottom: 0px;
}

li:nth-child(2)::before {
      border-bottom-right-radius: 100%;
      left: 0px;
      top: 0px;
}

li:nth-child(1)::after {
      border-radius: 100% 0 0 0;
      right: 0px;
      bottom: 0px;
}

li:nth-child(2)::after {
      border-bottom-left-radius: 100%;
      right: 0px;
      top: 0px;
}

 

//可以自由调节虚线样式
.dashed {
      display: inline-block;
      font-size: 0.44rem;
      background: linear-gradient(90deg, #E0E1E3 66%, transparent 0) repeat-x;
      background-size: 0.5em 0.02rem;
      background-position: 0 0;
      text-shadow: 0.05em 0 #fff, -0.05em 0 #fff;
}