我们可以使用CSS将分级添加到椭圆形表单中吗？

我想用css将毕业标记添加到一个椭圆形中，以获得级别，比如说25%、50%和75%，只是一个a分数（“-”）

我用来画表单的代码是

.circle {
    background-color: red;
    display: inline-block;
    border-width: 10px;
    border-radius: 50px;
    height: 300px;
    width: 200px;
    margin-right: 10px;
}

我想要得到的是这样的东西：

---

提前感谢大家

使用渐变色作为主色调和标记：

.circle{
背景：
线性梯度（#000，#000）0 25%/50px 5px，/*顶部*/
线性梯度（#000，#000）0 50%/100px 5px，/*中间*/
线性梯度（#000，#000）0 75%/50px 5px，/*底部*/
/*主色*/
线性梯度（红色、红色）底部/100%75%；
背景重复：无重复；
显示：内联块；
边界半径：50px；
高度：200px；
宽度：150px；
右边距：10px；
边框：1px实心；
}

---

还有其他方法吗，因为我想将它集成到react native中？@Souhaieb react不允许梯度？我在发布问题后发现了，这就是为什么我问是否有其他方法，无论如何，谢谢