小程序如何写不规则选项卡，css内凹圆角

我们终究会在这旅途中，收获某一片值得纪念的风景。哪怕这片风景的意义，只有自己知道

常见的情况下选项卡要么圆角加背景，或者简单的直接在下方选中时候添加一个横线偶尔会有一些特殊的需求例如梯形选项卡，圆角梯形....等等

今日效果图，需要实现选项卡中间间隔的S形;小程序如何写不规则选项卡，css内凹圆角

方案

这种没办法直接在容器上无法实现，只能通过定位叠加一个容器实现

第一种

需要2个容器，第一个起初是正方形，另外是圆形，他们叠加上后正方形3角设置成和圆一样的弧度；最后只要把正方形设置成选择颜色，圆形设置成背景色；定位在选项卡的

第二种

是用background-image的radial-gradient；相比第一种方式少一个容器，也就是常说的css内凹圆角

案例

基于uni-app案例，目前只适合2个选项卡，如果是多个选项卡；需要对内切圆多做样式做些if判断即可，这里就不做演示

<template>
  <view>
    <view class="tab-view">
      <block v-for="(item, index) in tab" :key="index">
        <view :class="active == index ? 'tab-item tab-ac':'tab-item'" @tap="tabTap(index)">
          {{item}}

          <view :class="active == 0 ? 'tab-tag':'tab-tag-one'"></view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tab: ['选项1', '选项2', '选项3'],
        active: 0,
      }
    },
    methods: {
      tabTap(e) {
        this.active = e;
      }
    }
  }
</script>

<style>
  page {
    background-color: #f8f8f8;
  }

  .tab-view {
    background-color: #d5d5d5;
    height: 120rpx;
    margin: 200rpx 30rpx;
    border-radius: 20rpx;
    display: flex;
    overflow: hidden;
  }

  .tab-item {
    width: 50%;
    line-height: 120rpx;
    text-align: center;
    border-radius: 20rpx 20rpx 0 0;
    flex-shrink: 0;
    overflow: hidden;

    /* 定位 */
    position: relative;

  }

  .tab-ac {
    background-color: #ffffff;
    position: unset !important;
  }

  .tab-tag {
    height: 30rpx;
    width: 30rpx;

    /* 核心样式 */
    background-image: radial-gradient(220rpx at 30rpx 0rpx, #d5d5d5 30rpx, #ffffff 30rpx);
    /* 定位 */
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .tab-tag-one {
    height: 30rpx;
    width: 30rpx;
    /* 核心样式 */
    background-image: radial-gradient(220rpx at 0rpx 0rpx,  #d5d5d5 30rpx, #ffffff 30rpx);
    /* 定位 */
    position: absolute;
    right: 0;
    bottom: 0;
  }
</style>