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

原文地址：https://blog.csdn.net/m0_51430102/article/details/140541961

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！