不可思议的clip-path

clip-path主要用来裁剪形状，常用来处理不规则展示

clip-path MDN文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
clip-path在线生成：https://www.html.cn/tool/css-clip-path/

css属性样式都比较简单粗暴，这里不再赘述语法，如果想看语法的话，直接到MDN文档里看就行了，下面列举些示例，扩展下视野，以便后期可能会用到

一、三角形

<style type="text/css">
  .zh-box {
    width: 150px;
    height: 150px;
    background: url(https://p1.pstatp.com/large/pgc-image/a82c29ae7cb642d1a8c88a3781255144) no-repeat center top;
    background-size: 200% auto;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
</style>
<div class="zh-box"></div>

二、菱形

clip-path对应如下：

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

三、对话气泡

clip-path对应如下：

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

四、星形

clip-path对应如下：

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

五、箭头

clip-path对应如下：

clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);

先就这5种吧，其他的都不列举了，直接到上面在线生成里审查元素，copy对应的clip-path属性即可，没有的话就需要自己实现了。