Html 如何创建圆形V形形状

我正在尝试使用CSS创建一个圆头的V形形状（顶部边缘，而不是三角形），但无法实现这一点。有人能帮忙吗？ 演示

CSS:

---

一个圆形的V字形，嘿？像这样的

我用一个伪元素和一个径向梯度实现了这一点

。四舍五入{
高度：200px；
宽度：200px；
位置：相对位置；
利润率：100像素；
背景：番茄；
}
.四舍五入：之前{
内容：“；
位置：绝对位置；
前-20%；
身高：20%；
宽度：100%；
左：0；
背景：径向梯度（顶部中心椭圆，rgba（0,0,0,0）0%，rgba（0,0,0,0）70%，番茄71%，番茄100%）；
}

---

这不是最干净的方法，但它很有效，并且使用伪元素

要更改曲线的深度，只需更改

：after

标记内的高度即可

.chevron{
位置：相对位置；
文本对齐：居中；
填充：12px；
边缘底部：6px；
高度：60px；
宽度：200px；
背景：红色；
}
雪佛龙：之后{
内容：''；
宽度：200px；
填充：12px；
高度：1px；
位置：绝对位置；
顶部：-12px；
左：0；
边界半径：50%；
边框颜色：白色；
背景：白色；
}

---

你是说顶部是一个完整的半圆还是仅仅是顶端？我不会说是一个完整的半圆，而是一个圆形的顶部。一个略微圆润的脑袋。像这样？一张图片会很有帮助，这样我们就能确切地知道你想要什么。一张图片已经被添加了。这对我帮助很大。谢谢没问题。如果你想选择纯色V形，我会选择我答案的后半部分。

#shape{
    width: 100px;
    height: 100px;
    background-color: lightblue;
    -webkit-clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0);
    clip-path: polygon(100% 100%, 0 100%, 0 0, 52% 16%, 100% 0);
}