CSS属性 clip-path

clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
可以在 Clip-path 属性中指定范围之外的坐标。

1. 还支持范围外的坐标，例如小于0%的坐标和大于100%的坐标。
2. 通过指定范围外的坐标，可以用更少的坐标来表示。

clip-path的属性值可以是以下几种：
inset；将元素剪裁为一个矩形
circle；将元素剪裁成一个圆
ellipse；将元素剪裁成一个椭圆
polygon；将元素剪裁成一个多边形

指定超出范围值
它还支持超出范围的值，如小于0%或大于100%的坐标。

<div class="hexagon"></div>

.hexagon {
  aspect-ratio: cos(30deg); 
  inline-size: 180px;
  background-color: #313135;
  clip-path: polygon(
    -50% 50%,
    50% 100%,
    150% 50%,
    50% 0
  );
}