单击分割的图像（不是正方形）并进行更改

Question

嗨，我在一个学生网络游戏项目团队中。 我在我们的项目中使用HTML ， CSS和JavaScript 。 我想知道如何分割图像以进行单击和更改。

考虑以下图像作为我们的示例：

圆圈有3个部分，如果单击它们，则必须更改它们，但是我找不到如何分割图像的方法。 每当用户单击零件时，我都希望它突出显示这样的部分：

这来自一些旧的Flash游戏，例如游戏地图或Pizza游戏。 谢谢您阅读此篇！

Answer 1

不知道是否必须使用图像，如果不需要，可以这样进行：

 .circle { position: relative; margin: 1em auto; border: 4px solid black; padding: 0; width: 15em; height: 15em; border-radius: 50%; list-style: none; overflow: hidden; } .slice { overflow: hidden; position: absolute; top: 0; right: 0; width: 50%; height: 50%; transform-origin: 0% 100%; border: 2px solid black; box-sizing: border-box; } .slice-contents { position: absolute; left: -100%; width: 200%; height: 200%; border-radius: 50%; } .slice:nth-child(1) { transform: rotate(-60deg) skewY(30deg) scale(1.2); } .slice:nth-child(1) .slice-contents { transform: skewY(-30deg); } .slice:nth-child(2) { transform: rotate(60deg) skewY(30deg) scale(1.2); } .slice:nth-child(2) .slice-contents { transform: skewY(-30deg); } .slice:nth-child(3) { transform: rotate(180deg) skewY(30deg) scale(1.2); } .slice:nth-child(3) .slice-contents { transform: skewY(-30deg); } .slice:nth-child(3) .slice-contents:active { background: lightblue; } .inner-pie { position: absolute; width: 3em; height: 3em; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 4px solid black; background: white; } 

 <ul class='circle'> <li class='slice'> <div class='slice-contents'></div> </li> <li class='slice'> <div class='slice-contents'></div> </li> <li class='slice'> <div class='slice-contents'></div> </li> <ul> 

Answer 2

您可以在分区中创建扇区，并将其用于划分圆。 这是一个小提琴： https : //jsfiddle.net/tg5jybb9/

所有您需要做的就是使用jquery或javascript切换黑白click events