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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.