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);
}