<h2>clip-path可以响应动画(请hover到图形上)
</h2>


<table>
  <tr>
    <td>顶点不同</td>
    <td>顶点相同</td>
  </tr>
  <tr>
    <td><div class="shape"></div></td>
    <td><div class="shape shape1"></div></td>
  </tr>

</table>
 
 



html, body{
  
    width: 100%;
    height: 100%;
    padding: 0;
    margin:0;
  }
h2{text-align:center}
  .shape{
    color: #fff;
    float: left;
    transition: .6s;
    width: 400px;
    height: 400px;
    background-color: #333;
    -webkit-clip-path: polygon(10% 10%, 10% 50%, 50% 50%)
  }
  .shape1{
    -webkit-clip-path: polygon(10% 10%, 10% 50%, 50% 50%, 30% 30%)
  }
  .shape:hover{
    background-color: #888;
    -webkit-clip-path: polygon(10% 10%, 10% 50%, 50% 50%, 50% 10%);
  }
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.