如何使用 HTML / CSS / JavaScript 完成這些類型的圓形按鈕？

Question

我想要完成的是幾個按鈕像一個圓圈一樣排列。 它應該是圓形的，雖然它看起來像一個雞蛋。 我希望圖像是有意義的。

Answer 1

這不是超級容易，但你可以做到。 你基本上會做這樣的事情，只是你在中心覆蓋另一個圓圈。

Answer 2

我認為這里最好的方法是使用 svg。

看看這里：

 svg{width:170px}

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200"> <path fill="red" d="M 13.3974 50 A 100 100 0 0 1 186.6025 50 L 143.3012 75 A 50 50 0 0 0 56.6987 75 Z"></path> <path fill="blue" d="M 186.6025 50 A 100 100 0 0 1 100 200 L 100 150 A 50 50 0 0 0 143.3012 75 Z"></path> <path fill="green" d="M 100 200 A 100 100 0 0 1 13.3974 50 L 56.6987 75 A 50 50 0 0 0 100 150 Z"></path> <g dominant-baseline="middle" text-anchor="middle" fill="white"> <path id="btn1" d="M 62.5 35.048 A 75 75 0 0 1 137.5 35.048" fill="transparent" /> <path id="btn2" d="M 175 100 A 75 75 0 0 1 137.5 164.9519" fill="transparent" /> <path id="btn3" d="M 62.5 164.9519 A 75 75 0 0 1 25 100" fill="transparent" /> <text> <textPath startOffset="50%" xlink:href="#btn1"> Button 1 </textPath> </text> <text> <textPath startOffset="50%" xlink:href="#btn2"> Button 2 </textPath> </text> <text> <textPath startOffset="50%" xlink:href="#btn3"> Button 3 </textPath> </text> </g> <text x="100" y="100" dominant-baseline="middle" text-anchor="middle" fill="black">Hello world!</text> </svg>

您可以在此處查看 svg 路徑和此處有關文本路徑的信息。

要計算圓上點的x和y ，請注意x = centerX + Math.cos(angle) * radius和y = centerY + Math.sin(angle) * radius 。

例如，在上面的示例中，視口為 200*200，因此centerX = 100, centerY = 100 ，外半徑為 100，內半徑為 50。頂部從角度-5*Math.PI/3 ，所以 x點是100 + Math.cos(-5*Math.PI/3)*100 = 13.3974並且 y 點是100 + Math.sin(-5*Math.PI/3)*100 = 50等等