[英]How can I accomplish these type of round buttons using HTML / CSS / JavaScript?
I think the best way here is to use svg.我认为这里最好的方法是使用 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.您可以在此处查看 svg 路径和此处有关文本路径的信息。
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
.要计算圆上点的
x
和y
,请注意x = centerX + Math.cos(angle) * radius
和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例如,在上面的示例中,视口为 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
等等
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.