如何使用CSS的clip-path和path函数实现分段器的45度曲线效果？

<div class="wrap">
  <div class="tabs">
    <div class="tab active">标签1</div>
    <div class="tab">标签2</div>
  </div>
  <div class="content-wrap"></div>
</div>

.wrap {
  background-color: #eee;
  width: 375px;
  margin: 0 auto;
  padding: 10px;
}

.tabs {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#cdd9fe, #e2e9fd);
}

.tab {
  flex: 0 0 50.1%;
  height: 50px;
  cursor: pointer;
  position: relative;
  text-align: center;
  line-height: 50px;
}

.tab.active {
  background-color: #fff;
  color: #4185ef;
}

.tab.active:before { /* 左侧曲线 */
  content: '';
  position: absolute;
  top: 0;
  left: -50px;
  height: 100%;
  width: 50px;
  z-index: 2;
  background-color: #fff;
  clip-path: path('M 0,50 C 25,50 25,0 50,0 L 50, 50 Z');
}

.tab.active:after { /* 右侧曲线 */
  content: '';
  position: absolute;
  top: 0;
  right: -50px;
  height: 100%;
  width: 50px;
  z-index: 2;
  background-color: #fff;
  clip-path: path('M 0,0 C 25,0 25,50 50,50 L 0, 50 Z');
}

.content-wrap {
  min-height: 200px;
  background-color: #fff;
}