Javascript 如何在角度/角度上构建圆形段？

我正在尝试使用

和

组件构建一个圆形段。 我在Stack上发现了同样的问题，但它没有那么有用，我也没有找到实现它的方法

这是我用段组件尝试的：

<ion-grid>
   <ion-row class="ion-align-items-center">
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g1']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g2']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g3']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g4']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g5']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g6']}}</ion-label>
     </ion-col>
   </ion-row>

   <ion-row class="ion-align-items-center">
     <ion-segment (ionChange)="segmentChanged($event)">
       <ion-col size="2">
         <ion-segment-button>
           <ion-label>{{date['d1']}}</ion-label>
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d2']}}
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d3']}}
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d4']}}
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d5']}}
         </ion-segment-button>
       </ion-col>
       <ion-col size="2">
         <ion-segment-button>
           {{date['d6']}}
         </ion-segment-button>
       </ion-col>
     </ion-segment>
   </ion-row>
 </ion-grid>

{{date['g1']}
{{date['g2']}
{{date['g3']}
{{日期['g4']}
{{日期['g5']}
{{日期['g6']}
{{date['d1']}
{{date['d2']}
{{date['d3']}
{{date['d4']}
{{date['d5']}
{{date['d6']}

这是我得到的结果：

除了对齐（由于“分段”按钮的宽度超过了列），我知道这些组件可能不允许我这样做， 因此，我尝试使用按钮构建相同的功能：

<ion-grid>
   <ion-row class="ion-align-items-center">
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g1']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g2']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g3']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g4']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g5']}}</ion-label>
     </ion-col>
     <ion-col class="date_label" size="2">
       <ion-label>{{date['g6']}}</ion-label>
     </ion-col>
   </ion-row>

   <ion-row class="ion-align-items-center">
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d1']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d2']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d3']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d4']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d5']}}
       </ion-button>
     </ion-col>
     <ion-col class="ion-no-padding" size="2">
       <ion-button color="light" class="ion-no-padding">
         {{date['d6']}}
       </ion-button>
     </ion-col>
   </ion-row>
 </ion-grid>`

{{date['g1']}
{{date['g2']}
{{date['g3']}
{{日期['g4']}
{{日期['g5']}
{{日期['g6']}
{{date['d1']}
{{date['d2']}
{{date['d3']}
{{date['d4']}
{{date['d5']}
{{date['d6']}
`

从图形上看，这就是我要寻找的，但由于这些是按钮，我不知道如何实现选择器行为（当按下一个按钮时，更改其CSS使其处于选中状态，当按下另一个按钮时，删除CSS并将其添加到按下的按钮）

就像问题一样，这是我想要建立的最终结果。

---

制作圆是关于CSS的，一半的边界半径和高度构成一个圆。可以使用after创建与元素一起浮动的圆。只需在ionic DOM中选择一个元素，并使用如下类将其作为目标

。已选定{
宽度：30px；
高度：30px；
颜色：白色；
文本对齐：居中；
背景色：红色；
边界半径：15px；
垫面：5px；
框大小：边框框；
}
.标记{
宽度：30px；
高度：30px；
文本对齐：居中；
垫面：5px；
框大小：边框框；
}
.标记：：之后{
内容：''；
位置：相对位置；
宽度：6px；
高度：6px；
边界半径：3px；
背景色：红色；
显示：内联块；
左：-10px；
顶部：15px；
}

10
10

我创建了一个新的StackBlitz，但我在按钮的文本宽度方面遇到了问题，它只显示了一部分…但是这也是链接，因为列的尺寸会随着屏幕的变化而变化，增加了不同设备的显示尺寸，圆圈变成椭圆形