css - 溢出 :hidden can't hidden skew dom event?

Question

我通过CSS的草图创建了一个菱形，它位于一个圆圈的左上角。

我为圆圈设置了overflow: hidden。钻石怎么还能触发cursor: pointer？

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

Answer 1

clip-path 可以解决这个问题。它似乎只发生在 Chrome 上:

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