我需要使用 HTML、CSS、SVG 或其他类似方式重新创建上面的图像。它仅用于视觉目的,不需要任何类型的实际功能。最好非白色部分是透明的,这样我就可以轻松更改背景颜色并在中心内放置其他元素
我不能使用透明图像的原因是因为我需要能够轻松地对其进行缩放,并且可以轻松地更改条形的颜色
我知道如何使用这种 CSS 方法来做大致相同的事情,但这需要为我不想要的每个单独的片段添加一个单独的元素。
我想到的另一个选择是在 Raphael.js 中创建一个包含很多片段的甜甜圈图,但这对于我想要的简单结果来说似乎也需要做很多工作
所以在我使用我提到的一种方法开始一个漫长而复杂的过程之前,有没有一种更简单、更优化的方法来创造我想要的效果?我不是要求完成的输出,只是了解哪些方法是创建这种效果的最佳方法
编辑
最佳解决方案是纯 CSS 方法,不需要为每个段使用单独的元素。否则,提供的答案是很好的解决方案!