css - 使用 css 在 div 的底部创建弧

Question

我正在使用 vue 3、typscript 和 tailwind css 创建一个组件。我想在 div 的底部向内创建一个弧线。查看图片以查看我的意思。

通过使用以下代码，我得到以下输出，

<template>
  <div class="curved" :class="bgClasses">
    <slot></slot>
  </div>
</template>

<style>
.curved {
  border-radius: 50% 50% 0 0;
}
</style

我希望弧线按原样显示，但在 div 的底部，如下所示，

任何人都可以帮忙吗？

标签： css