使用CSS3沿着曲线路径的Div元素

所以基本的想法是1-9个座位在一张弧形的桌子上，就好像你是通过第一人称视角看的一样。我试图得到

div

元素，它将是在另一个

div

元素的外部流动的座位，该元素有一个边界半径，使其成为一个半长方形圆。我发现了一些示例，其中一个元素被设置动画，以弧形流过容器，但我需要div/seats是静态的。我正在寻找任何能引导我走上正确道路的想法或例子。

在椭圆上寻找点并翻译：

如果长方形圆类似于椭圆，则可以使用数学公式找到椭圆上的点，然后将每个

div

元素转换到该特定点

用于计算椭圆上的点

（x，y）

是

（a*cos（t），b*sin（t））

。在此公式中，

a

表示椭圆在x轴上的半径，

b

表示椭圆在y轴上的半径，

t

表示角度（弧度）。以弧度表示的角度=以度表示的角度*pi/180

为了利用这种方法，我们采取以下措施：

• 将

  div

  元素绝对放置在椭圆的中心点
• 计算每个角度对应的

  （x，y）

  ，并使用

  transform:translateX（…）translateY（…）

  将

  div

  平移到其位置。角度以22.5度为步长，因为总共有9个元素要放置在180度范围内

.container{
位置：相对位置；
高度：400px；
宽度：600px；
填充：12.5px；
边框：1px实心；
边界半径：50%；
}
div>div{
位置：绝对位置；
顶部：0px；
左：0px；
身高：50%；
宽度：50%；
变换原点：右下角；
}
div>div:after{
位置：绝对位置；
内容：''；
底部：0px；
右：0px；
高度：25px；
宽度：25px；
背景：黑色；
边界半径：50%；
转化：translateX（50%）translateY（50%）；
}
div>div:after{
背景：红色；
}
div>div:n子级（n+4）：之后{
背景：橙色；
}
div>div:n子级（n+7）：之后{
背景：绿色；
}
div>div:n个子项（1）{
转换：translateX（-300px）translateY（0px）；
}
div>div:n子级（2）{
转换：translateX（-277.17px）translateY（-76.5px）；
}
div>div:n子级（3）{
转换：translateX（-212.13px）translateY（-141.42px）；
}
div>div:n子级（4）{
转换：translateX（-114.80px）translateY（-184.77px）；
}
div>div:n个孩子（5）{
转换：translateX（0px）translateY（-200px）；
}
div>div:n个孩子（6）{
transform:translateX（114.80px）translateY（-184.77px）；
}
div>div:n个孩子（7）{
转换：translateX（212.13px）translateY（-141.42px）；
}
div>div:n个孩子（8）{
转换：translateX（277.17px）translateY（-76.5px）；
}
div>div:n子级（9）{
转换：translateX（300px）translateY（0px）；
}

下面是一个关于如何实现它的非常粗略的想法-。距离不够近，无法作为答案发布，而且我现在没有时间调整它。这将很好地帮助我开始。实际上，我只是在散步时想到了类似的事情。谢谢你，哈利，如果你想把它作为一个答案，我会很高兴让它成为一个答案。请看，因为它类似于一个熟悉的概念，你试图实现。神圣的数学跳跃奇迹！！！你在这件事上全力以赴。谢谢你的详细回答。我一直想知道为什么这么多数学是计算机科学课程的一部分，现在我知道了。我将尝试使用第一个答案。再次感谢你的帮助。事实上，在看了多一点之后，我发现了一个问题。我需要的网页是一个响应设计。所以如果我使用这个方程，我需要定义绝对高度和宽度。而且，通过javascript在页面调整大小时设置值的成本会很高。你知道第一个答案是否适用于百分比吗？@jhorton：第一个答案需要JS来响应，因为位置是根据椭圆的X&Y半径计算的。第二个可以在没有任何额外计算的情况下做出响应，但如答案中所述，它需要一个缩放变换才能变成长方形，这意味着内部的

div

看起来也会缩放。