vue 侧边锚点外圆角

环境：uniapp、vue3、unocss、vant4

效果：

在这里插入图片描述

代码

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

html

<div v-show="!showPoint" class="fixedLeftDiv"><div><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"><divv-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)"><divv-if="activePoint === index"class="border-1 border-solid border-#FCB97D w-1 h-1 rounded-full mr-1"></div>{{ item.name }}</div></div><div><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

 
.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%);
}