点击圆形div的一角

Question

考虑以下图：

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

HTML：

<div class="floor">
  <div class="large ball zindex2" onclick="touch(this)">
    <div>
    /////////////////////////////////<br/>
    /////////////////////////////////
    </div>
  </div>
  <div class="small ball zindex1" onclick="touch(this)"></div>    
</div>
<div id="log"></div>

使用Javascript：

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

CSS：

.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; }

在点击两次蓝色小球之后，其位置绝对低于灰色球。

假设当前的图层定位，如何在点击大球或小球的任何位置时获得相应的消息。

JSFiddle

Answer 1

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

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