javascript - 如何将正方形 div 对 Angular 分成 4 个可点击的部分？

Question

这是如何将一个正方形沿对 Angular 线“划分”为 4 部分:

div {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-right: 50px solid blue;
  border-bottom: 50px solid green;
  border-left: 50px solid yellow;
}

<div>
</div>

(结果)

我想将事件附加到每个彩色区域 - 但当然你不能将事件附加到边框。我该怎么办？

Answer 1

这是一种方法。嵌套的 DIV。我使用带有网格的包装器将它们放置在 2x2 模式中，然后平移并旋转包装器。使用最外层的 div 进行裁剪。每一个都易于使用 onclick，您不需要执行额外的逻辑。只是需要更多的设置工作。

我还进行了此设置，以便您可以轻松更改正方形的大小。然而，这在 IE 中肯定行不通，但我认为我们真的不需要为此担心。

Working codepen

document.querySelector(".red").onclick = () => alert("red");

document.querySelector(".blue").onclick = () => alert("blue");

document.querySelector(".yellow").onclick = () => alert("yellow");

document.querySelector(".green").onclick = () => alert("green");

.clip {
  --size: 200px;
  height: var(--size);
  width: var(--size);
  overflow-x: hidden;
  overflow-y: hidden;
}

.rotate {
  height: calc(var(--size) * 1.5);
  width: calc(var(--size) * 1.5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  transform: translate(-50%, -50%) translate(calc(var(--size) * 0.5), calc(var(--size) * 0.5)) rotate(45deg) ;
}

.red {
  background: red;
}
.blue {
  background: blue;
}
.yellow {
  background: yellow;
}
.green {
  background: green;
}

<div class="clip">
  <div class="rotate">
    <div class="red">&nbsp;</div>
    <div class="blue">&nbsp;</div>
    <div class="yellow">&nbsp;</div>
    <div class="green">&nbsp;</div>
  </div>
</div>