vue 侧边锚点外圆角

环境：uniapp、vue3、unocss、vant4

如果能让UI给你切，就不需要看了

效果：

代码

主要是：pointTop 、pointCentent 、pointBottom，这三个样式

html

      <div v-show="!showPoint" class="fixedLeftDiv">
        <div class="pointBox">
          <div class="pointTop"></div>
          <div class="bg-black bg-op-70 pointCentent center" @click="showPoint = true">
            <van-icon name="arrow" size="16" color="white"></van-icon>
          </div>
          <div class="pointBottom"></div>
        </div>
      </div>

    <transition name="van-fade">
      <div v-show="showPoint" class="pl-4 box-border fixedLeftDiv flex items-center">
        <div class="flex flex-col items-center gap-2 bg-black bg-op-70 rounded-2 py-4 pl-2 pr-4 box-border">
          <div
            v-for="(item, index) in info.nodeList"
            :key="index"
            :class="[activePoint === index ? 'text-#FCB79D' : 'text-white', 'p-1 box-border flex items-center']"
            @click.stop="clickPoint(item, index)"
          >
            <div
              v-if="activePoint === index"
              class="border-1 border-solid border-#FCB97D w-1 h-1 rounded-full mr-1"
            ></div>
            {{ item.name }}
          </div>
        </div>

        <div class="pointBox">
          <div class="pointTop"></div>
          <div class="pointCentent center" @click="showPoint = false">
            <van-icon name="arrow-left" size="16" color="white"></van-icon>
          </div>
          <div class="pointBottom"></div>
        </div>
      </div>
    </transition>

css

.pointBox {
	// 在移动端，三个块级元素竖向排列中间会有缝隙，深色的话，更明显，还没有发现原因
	// 加上这个会减轻，但不会完全消失，
	font-size: 0; 
}

.pointTop {
  width: 24px;
  height: 40px;
  background: radial-gradient(circle at 352% -35%, transparent 85px, rgba(0, 0, 0, 0.7) 86%);
}

.pointCentent {
  width: 30px;
  height: 40px;
  background: radial-gradient(circle at -17% 20px, rgba(0, 0, 0, 0.7) 30px, transparent 77%);
}

.pointBottom {
  width: 24px;
  height: 40px;
  background: radial-gradient(circle at 350% 136%, transparent 85px, rgba(0, 0, 0, 0.7) 86%);
}