css 实现左圆右尖div组件(尖角样式，接收父组件的宽高不是固定PX而是百分比)

一个div,左边是半圆的，右边是尖角的，如下图，如何实现呢？

实现思路：

1、1个父盒子里面放两个div,一个用来实现左半圆，另一个实现尖角。

2、获取父盒子的宽高，设置尖角样式。

核心样式代码：

左半圆：

<div
      id="addcard"
      class="addcard"
      :style="{
        width: width,
        height: height,
        backgroundColor: color,
        borderRadius: `${divHeight}px 0 0 ${divHeight}px`,
      }"
    ></div>

右尖角：

  <div
      :style="{
        width: 0,
        height: 0,
        borderTop: `${divHeight / 2}px solid transparent`,
        borderLeft: `${divHeight / 2}px solid ${color}`,
        borderBottom: `${divHeight / 2}px solid transparent`,
      }"
    ></div>

完整代码：

<template>
  <div
    class="flex justif-between align-center"
    :style="{
      width: width,
      height: height,
    }"
  >
  <div class="absolute flex align-center" :style="{width:divHeight + 'px',marginTop:-2 + 'px'}"> <add></add></div>
 
    <div
      id="addcard"
      class="addcard"
      :style="{
        width: width,
        height: height,
        backgroundColor: color,
        borderRadius: `${divHeight}px 0 0 ${divHeight}px`,
      }"
    ></div>
    <div
      :style="{
        width: 0,
        height: 0,
        borderTop: `${divHeight / 2}px solid transparent`,
        borderLeft: `${divHeight / 2}px solid ${color}`,
        borderBottom: `${divHeight / 2}px solid transparent`,
      }"
    ></div>
  </div>
</template>

<script setup>
import { defineProps, ref, onMounted } from "vue";
import add from "../icons/add.vue"
const divWidth = ref(0);
const divHeight = ref(0);
const addcard = ref(null);
onMounted(() => {
  const div = document.getElementById("addcard");
  divWidth.value = div.clientWidth;
  divHeight.value = div.clientHeight;
});
// 定义组件接收的 props
const props = defineProps({
  width: {
    type: [Number, String],
    default: "100%", // 默认宽度
  },
  height: {
    type: [Number, String],
    default: "100%", // 默认高度
  },
  color: {
    type: String,
    default: "rgb(42,87,255)", // 默认颜色
  },
});
</script>

<style lang="scss" scoped>
</style>