可以使用CSS将刻度添加到椭圆形吗？

Question

我想使用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;
}

jsfiddle

我想要得到的是这样的：

在此先感谢大家

Answer 1

对主要颜色和标记使用渐变：

.circle {
    background:
      linear-gradient(#000,#000) 0 25%/50px 5px,  /*top */
      linear-gradient(#000,#000) 0 50%/100px 5px, /*middle */
      linear-gradient(#000,#000) 0 75%/50px 5px,  /*bottom*/
      /*main color*/
      linear-gradient(red,red) bottom/100% 75%;
    background-repeat:no-repeat;
    display: inline-block;
    border-radius: 50px;
    height: 200px;
    width: 150px;
    margin-right: 10px;
    border:1px solid;
}

<span class="circle"></span>

使用CSS变量，您可以轻松进行调整：

.circle {
    background:
      linear-gradient(#000,#000) 0 25%/50px 5px,
      linear-gradient(#000,#000) 0 50%/100px 5px,
      linear-gradient(#000,#000) 0 75%/50px 5px,
      /*main color*/
      linear-gradient(red,red) bottom/100% var(--p,100%);
    background-repeat:no-repeat;
    display: inline-block;
    border-radius: 50px;
    height: 200px;
    width: 150px;
    margin-right: 10px;
    border:1px solid;
}

<span class="circle"></span>
<span class="circle" style="--p:60%"></span>
<span class="circle" style="--p:50%"></span>
<span class="circle" style="--p:30%"></span>