overflow:hidden can't hidden skew dom event?

user_14267829 0
Viewed 32

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;
}
dom-events css
2 Answers

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>

user_86203330

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
user_25515910
Related