How can I accomplish these type of round buttons using HTML / CSS / JavaScript?

Question

What I am trying to accomplish is several buttons aligned like a circle. It is supposed to be circular although it looks like an egg. I hope the image makes sense.

Answer 1

It's not super easy but you can do it. You would basically do something like this only you overlay another circle on the centre.

Answer 2

I think the best way here is to use svg.

Take a look here:

 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>

You can checkhere about svg path, and here about text path.

For calculating the x and y of the points on the circle, note that x = centerX + Math.cos(angle) * radius and y = centerY + Math.sin(angle) * radius .

For example, at the example above the viewportis 200*200, so centerX = 100, centerY = 100 , with outer radius 100, and inner radius 50. the top part going from angle -5*Math.PI/3 , so the x point is 100 + Math.cos(-5*Math.PI/3)*100 = 13.3974 and y point is 100 + Math.sin(-5*Math.PI/3)*100 = 50 and so on