我有一个这样

但我希望它看起来像这样。

代码。我的问题是：使用不可点击的格式化单选按钮（我见过类似的外观）或使用完全不同的方法会更容易吗？我想我可以弄清楚如何根据当前状态改变颜色，但我不知道如何绘制形状的基本图形。

<代码>.容器{宽度：800px；边距：100px自动；}.进度条{计数器复位：步；}.progressbar Li{list-style-type：无；宽度：16.6666%；浮动：左；字体大小：12px；位置：相对；文本对齐：居中；文本转换：大写；颜色：#7D7D7D；}.progressbar Li：在{宽度：30px；高度：30px；内容：计数器（步）；计数器增量：STEP；行高：30px；边框：2px实线#7d7d7d；显示：块；文本对齐：居中；边距：0自动10px自动；边界半径：50%；背景色：白色；}.progressbar Li：之后{宽度：100%；高度：2px；内容：“ ”；位置：绝对；背景色：#7D7D7D；顶部：15px；左：-50%；Z指数：-1；}.progressbar Li：first-child：after{内容：无；}.progressbar Li.active{颜色：绿色；}.ProgressBar Li.Active：在{边框颜色：#55B776；}.ProgressBar Li.Active+Li：之后{背景色：#55B776；}

<代码><；DIV类=“容器”>；<；UL CLASS=“ ProgressBar ”>；<；Li类=“活动”>；未收到<；/Li>；<；Li类=“活动”>；要接收的请求<；/Li>；<；Li类=“活动”>；已接收到Compelte<；/Li>；<；Li>；完成到源<；/Li>；<；Li>；公众意见<；/Li>；<；Li>；分支机构经理问题<；/Li>；<；/UL>；<；/DIV>；

顺晟科技：

您可以使用具有边界半径和溢出隐藏的容器来完成基本形状，并为段提供倾斜的伪元素。这里有一个快速的概念验证：

<代码>UL{列表样式：无；显示：inline-flex；边框：1px纯黑色；border-radius：600px；溢出：隐藏；}李{填充：1em 2em；位置：相对；}李：在{内容：' '；位置：绝对；插入：0；BORDER-RIGHT：1px纯黑色；转换：倾斜（-30deg）；背景：浓汤；Z指数：-1；/*文本后面*/}李：第一个孩子{/*向左扩展第一项以填充剩余空间*/左边距：-4rem；左填充：4rem；}李：最后一个孩子{/*将最后一项向右扩展以填充剩余空间*/右边距：-2rem；填充权：4rem；}.活动：在{背景：天蓝色；}

<代码><；UL>；<；Li>；一个<；/Li>；<；Li>；两个<；/Li>；<；Li类=“活动”>；三<；/Li>；<；Li>；四个<；/Li>；<；Li>；五<；/Li>；<；/UL>；