今天分享一篇关于clip-path的玩法，希望各位小伙伴们也可以认识这个好玩且功能强大的css属性。

效果图

实现的思路

首先我们先建立一个盒子并布局好他的位置。

搭建框架

 .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 500px;

      background: linear-gradient(
          135deg,
          rgba(217, 112, 229, 0.475),
          rgba(163, 146, 71, 0.475)
        );
      background-repeat: no-repeat;
      background-size: cover;

我们使用的依然是绝对布局使其在页面中居中，但是这个方法只能使用在块级元素中，如果你想要其他的也可以的话，你必须加display:block;使其成为块级元素。

修饰样式

在这我们就要使用我们的主角了clip-path,这是一个功能强大的属性，它主要有insert,circle,ellipse,polygon四个属性。

insert属性

这是一个裁剪矩形的属性，语法为clip-path:insert(top,right,button,left);同时你也可以再加一个圆角属性。

clip-path: inset(`5%` `20%` `15%` `10%`);

circle圆形

这个语法为clip-path: circle(30%（圆的半径） at 150px 120px（圆的位置）); 圆的半径和圆的位置可以是以px为单位，也可以是百分号。

ellipse椭圆

这个和圆的方法差不多，clip-path: circle(30% 50%（x,y轴） at 150px 120px（椭圆的位置）)

polygon多边形

这个即使我们的主题了，

 clip-path: polygon(
        50% 0%,
        90% 20%,
        100% 60%,
        75% 100%,
        25% 100%,
        0% 60%,
        10% 20%
      );

clip-path: polygon();这其中的都是x和y轴的坐标，有几个坐标就是几边形，是不是很简单。

结束语

在最后加上动画就行了，就可以形成我这种效果了。今天这一次的分享就到此为止了，希望对各位小伙伴有所帮助，同时也希望大家也去尝试一下，这个好玩的css属性。