click through corner of rounded div

Question

Consider the following drawing:

rendered in Chrome by the following code:

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

after clicking twice on the blue small ball, which is positioned absolutely lower than the grey ball.

Assuming the current layer positioning, how can I get the appropriate message when clicking anywhere on either the large ball or the small ball.

JSFiddle

Let me know if the dupe does not solve the issue. If you try your fiddle in Firefox/Edge/IE it works as is — Asons, Apr 25 '17 at 17:40

score 0 · Answer 1 · answered Apr 25 '17 at 17:27

0

The answer is simple, rotate both balls by 45 degree

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

answered Apr 25 '17 at 17:27

Yash Yadav

659
4
14

1

That solve it for the blue, though consider having many balls around, like this, which only have 2, still, now the red won't work: https://jsfiddle.net/px7x5a1w/2/ – Asons Apr 25 '17 at 17:34
@LGSon look in HTML it will always remain square box until you use canvas or SVG. It's basic HTML. You can't change it. It may appear to be rounded but it cant become that. – Yash Yadav Apr 25 '17 at 17:38
@LGSon However with some complexity, you can use javascript to calculate cursor position inside the main div and then rotate the corners of big circle div away from where cursor is going. – Yash Yadav Apr 25 '17 at 17:40
It is a bug in Chrome...check the dupe links I closed with – Asons Apr 25 '17 at 17:40
Yes, my bad. It's chrome's fault. – Yash Yadav Apr 25 '17 at 17:44
Even so, I upvoted as it is a nice fix if one only have the initial 2 balls...and you only need to rotate the big :) – Asons Apr 25 '17 at 17:46
@LGSon yes only one ball to be rotated but rotating both provides more clickable area.But again its your choice and the requirement of webpage you are building. – Yash Yadav Apr 25 '17 at 17:49

click through corner of rounded div

1 Answers1