需求设计稿如图

做项目的时候看到这种需求通常无处下手，通常想用贴背景图来解决，但是一个优雅的前端绝对不会对一个效果屈服而贴图

代码奉上

//父级
&::before {
      position: absolute;
      top: -2px;
      left: -1px;
      content: "";
      width: 18px;
      height: 18px;
        border-top-left-radius: 10px;
      border-top: 3px solid #0ecd88;
      border-left: 3px solid #0ecd88;
    }
    &::after {
      position: absolute;
      top: -2px;
      right:-1px;
      content: "";
      width: 18px;
      height: 18px;
        border-top-right-radius: 10px;
      border-top: 3px solid #0ecd88;
      border-right: 3px solid #0ecd88;
    }
//子元素
&::before {
          position: absolute;
          bottom:-2px;
          left: -1px;
          content: "";
          width: 18px;
          height: 18px;
            border-bottom-left-radius: 10px;
          border-bottom: 3px solid #0ecd88;
          border-left: 3px solid #0ecd88;
        }
        &::after {
          position: absolute;
          bottom: -2px;
          right: -1px;
          content: "";
          width: 18px;
          height: 18px;
            border-bottom-right-radius: 10px;
          border-bottom: 3px solid #0ecd88;
          border-right: 3px solid #0ecd88;
        }

错开的原因是一个元素不能有两个before和after