用贝塞尔曲线实现曲线tab,仿chrome浏览器标签页曲线,加阴影。

137 阅读1分钟
.van-tab--active {
    position: relative;
    background: #f4f7fb;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.16));
    transform: translateZ(0);
    &::after {
      content: '';
      position: absolute;
      top: 0;
      right: -15px;
      height: 100%;
      width: 16px;
      background: inherit;
      clip-path: path('M 0,0 C 8,0 8,32 16,32 L 0, 32 Z');
    }
    &::before {
      overflow: visible;
      content: '';
      position: absolute;
      top: 0;
      left: -15px;
      height: 100%;
      width: 16px;
      background: inherit;
      clip-path: path('M 0,32 C 8,32 8,0 16,0 L 16, 32 Z');
    }
  }

3ae3df7b-6202-4bfc-8073-d82ee075d62e.png