I created a diamond through the sketch of CSS, which is located in the upper left corner of a circle. I set overflow: hidden for the circle. Why can the diamond still trigger cursor: pointer?

What you could do is use:

1. clip-path: circle(P) as mentioned by Temani
2. Draw your inital circle differently using area tags: https://www.w3schools.com/tags/tag_area.asp
3. Or use an inline SVG: https://www.codegrepper.com/code-examples/whatever/inline css svg circle