Javascript 通过圆角div的角点单击

考虑以下图纸：

通过以下代码在Chrome中呈现：

HTML:

单击蓝色小球两次后，蓝色小球的位置绝对低于灰色小球

假设当前层的位置，单击大球或小球上的任意位置时，如何获得适当的消息

---

答案很简单，将两个球旋转45度

  .floor .ball {
  border-radius: 50%;
  overflow: hidden;
  color: #ff0;
  transform: rotate(45deg); /* ADD THIS LINE TO YOUR JS FIDDLE AND RUN */
}

---

这解决了蓝色的问题，尽管考虑了很多球，像这样，只有2个，但现在红色不起作用：@ LGSON在HTML中，直到使用画布或SVG，它才会一直保持正方形。这是基本的HTML。你不能改变它。它可能看起来是圆形的，但它不能变成圆形。@LGSon然而，有点复杂，你可以使用javascript计算光标在主div内的位置，然后将大圆div的角旋转到远离光标的地方。这是Chrome中的一个bug…检查我关闭的复制链接是的，我的坏。这是chrome的错。如果被骗者不能解决问题，请告诉我。如果您在Firefox/Edge/IE中尝试小提琴，它将按原样工作

function log(str) {
  document.getElementById('log').innerHTML += '<br/>' + str;
}
function touch(ball) {
  log(ball.className + ' clicked')
}

.floor { background-color: #ddd; width:200px; height: 200px; }
.floor .ball { border-radius: 50%; overflow: hidden; color: #ff0; }    
.ball.small { height:25px; width: 25px; background-color: #00f; }
.ball.large { height:150px; width: 150px; background-color: #555; }
.zindex1 { position:absolute; z-index:1; }
.zindex2 { position:absolute; z-index: 2; }

  .floor .ball {
  border-radius: 50%;
  overflow: hidden;
  color: #ff0;
  transform: rotate(45deg); /* ADD THIS LINE TO YOUR JS FIDDLE AND RUN */
}