css 利用 clip-path 裁剪多边形，三角形，梯形，六边形等

clip-path介绍

clip-path可以把一个div元素裁剪成不同的形状，换句话说，可以把div元素不想要的部分剪掉。
clip-path从每个点的坐标着手，沿坐标的路径进行裁剪。

circle裁剪圆形

circle(半径 at 圆心x坐标 圆心y坐标)

.content {
  width: 200px;
  height: 200px;
  background: #e4c1db;
  color: #fffded;
  font-size: 24px;
  letter-spacing: 6px;
  clip-path: circle(50% at 50% 50%);
}

ellipse裁剪椭圆形

ellipse(长轴半径 短轴半径 at 圆心x坐标 圆心y坐标)

.content {
  width: 200px;
  height: 200px;
  background: #e4c1db;
  color: #fffded;
  font-size: 24px;
  letter-spacing: 6px;
  clip-path: ellipse(50% 25% at 50% 50%);
}

inset裁剪内置矩形

ellipse(上 右 下 左边距 round 上 右 下 左圆角)

clip-path: inset(20px 20px 30px 40px round 10px 20px 50px 20px);

polygon裁剪多边形

公共代码（下方裁剪不同的多边形时只需修改polygon里的值）：

<div class="content flex-column">
  <span>HAPPY</span>
</div>

.content {
  width: 200px;
  height: 200px;
  background: #e4c1db;
  color: #fffded;
  font-size: 24px;
  letter-spacing: 6px;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

clip-path 裁剪三角形

.content {
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

clip-path 裁剪梯形

.content {
  clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);
}

clip-path 裁剪六边形

.content {
  clip-path: polygon(75% 0,100% 50%,75% 100%, 25% 100%,0 50%, 25% 0);
}