<h2>clip-path的UI响应区域只有裁剪图形区域
</h2>
<p>尝试hover和鼠标click</p>


  <div class="shape"></div>




html, body{
  
    width: 100%;
    height: 100%;
    padding: 0;
    margin:0;
  }
h2{text-align:center}
  .shape{
    width: 100%;
    height: 100%;
    background-color: #333;
    -webkit-clip-path: polygon(10% 10%, 50% 20%, 20% 50%)
  }
  .shape:hover{
    background-color: #ddd;
  }
document.querySelector('.shape').onclick=function(){
  alert("点中了 .shape")
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.