'overflow:hidden can't hidden skew dom event?

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. How can the diamond still trigger cursor: pointer?

image

Here is the codepen of the project.

html

<div class='container'>
    <div class='skew'></div>
</div>

css

.container {
    position: relative;
    z-index: 1;
    margin-top: 150px;
    margin-left: 300px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 1px solid red;
    overflow: hidden
}

.skew {
    transform-origin: right bottom;
    transform: skewX(45deg);
    width: 150px;
    height: 150px;
    border: 1px solid blue;
    cursor: pointer;
}
cssdom-events


Solution 1:[1]

clip-path can fix this. It seems to happen on Chrome only:

.container {
  position: relative;
  z-index: 1;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid red;
  overflow: hidden;
  clip-path: circle(50%); /* added */
}

.skew {
  transform-origin: right bottom;
  transform: skewX(45deg);
  width: 150px;
  height: 150px;
  border: 1px solid blue;
  cursor: pointer;
}
<div class='container'>
  <div class='skew'></div>
</div>

Solution 2:[2]

The behavior you are getting is because the cursor is a CSS function that is activated by the browser when the mouse enters the given area params of .skew.

overflow:hidden doesn't affect this functionality.

What is happening is that the DOM renders everything out in a Square, and the border-radius doesn't really care about this.

So what is happening is that you are cutting out this piece of pie, but there is still the distance between the edge of the circle you have drawn and the edge of the div.

enter image description here

What you could do is use:

  1. clip-path: circle(%50) 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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Temani Afif
Solution 2 Sweet Chilly Philly

Related Questions