最终效果

实现方法

1. ::before、::after伪元素裁剪拼接

完整代码：

示例中图标引用了iconfont，地址点击这里

html代码

  <body>
    <ul>
      <li class="active"><i class="iconfont">&#xe61d;</i></li>
      <li><i class="iconfont">&#xe61e;</i></li>
      <li><i class="iconfont">&#xe61f;</i></li>
      <li><i class="iconfont">&#xe620;</i></li>
      <li><i class="iconfont">&#xe621;</i></li>
    </ul>
  </body>

css代码

@import "./font/iconfont.css";

.iconfont {
  font-size: 40px;
  color: #ffffff;
}

ul {
  width: 150px;
  margin: 200px auto 0;
  padding: 40px 0 40px 10px;
  background-color: #40699e;
  border-right: 10px solid #00aaff;
  box-sizing: border-box;
}


li {
  position: relative;
  height: 80px;
  line-height: 80px;
  list-style: none;
  background-color: #40699e;
  border-radius: 20px 0 0 20px;
  cursor: pointer;
  transition-duration: 0.3s;
}

li::before,
li::after {
  position: absolute;
  right: 0;
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 100%;
  box-shadow: 0 0 0 20px transparent;
  transition-duration: 0.3s;
  z-index: 1;
}

li::before {
  top: -40px;
  clip-path: inset(50% 0 0 50%);
}

li::after {
  bottom: -40px;
  clip-path: inset(0 0 50% 50%);
}


li.active,
li:hover {
  background-color: #00aaff;
  transition-duration: 0.3s;
}

li.active::before,
li.active::after,
li:hover::before,
li:hover::after {
  box-shadow: 0 0 0 20px #00aaff;
}

li i {
  margin-left: 20px;
}