html - 如何创建一个带有像光线一样的文本的圆圈

Question

我想要一个圆圈，里面有光线……大约有 24 条。每条光线都是一个矩形，里面有一个单词。所以它基本上是网站中的一个菜单，但不是在页面侧面的列中，而是围绕一个圆圈。当然，每个矩形都均匀地与其他矩形分开，形成一个看起来像太阳的东西。

谁能告诉我如何使用 HTML/CSS 做到这一点？如果需要，也可以使用 Javascript 和 JQuery。

Answer 1

像这样的小提琴？

在小提琴中，我使用 javascript 循环来设置所有角度，但如果您提前知道会有多少光线，它也可以是静态 css：

.ray {
    position: absolute;
    left: 50%;
    width: 200px;
    top: 40px;
    bottom: 40px;
    padding-left: 10px;
    transform-origin: 0px 50%;
}

#ray1 {
    transform: rotate(0deg);
}

#ray2 {
    transform: rotate(72deg);
}
...

（对于实际代码，您自然会希望使用 -webkit 等前缀作为转换属性；使用 jquery 的另一个好处是它会自动处理）