javascript - 单击分割图像(不是正方形)并更改它

Question

大家好，我在一个学生网络游戏元素团队。我正在为我们的元素使用 HTML、CSS 和 JavaScript。我想知道如何分割图像以供点击和更改。

以下图为例:

圆圈有 3 个部分，如果单击它们必须更改它们，但我找不到如何划分图像。每当用户单击某个部分时，我希望它突出显示如下部分:

这是从一些旧的 flash 游戏中产生的，例如游戏 map 或披萨游戏。感谢您阅读本文!

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>