关于CSS切角，clip-path: polygon()

如果你有一个元素，其宽度和高度不同，并且你希望剪切掉相同的右下角，你可以通过计算相对于元素宽度和高度的百分比来实现。这样，无论元素的实际尺寸如何，剪切的部分都会保持相对一致的比例。

假设你想从右下角剪切出一个固定比例大小的三角形（比如，从右边和底部各去掉 20% 的区域），你可以使用 clip-path: polygon() 来定义这个多边形路径。这里是如何做到这一点的例子：

.element {
  width: 300px; /* 示例宽度 */
  height: 200px; /* 示例高度 */
  background-color: #2196F3; /* 蓝色背景 */
  clip-path: polygon(
    0% 0%, /* 左上角 */
    100% 0%, /* 右上角 */
    100% 80%, /* 右侧，距离底部20%处 */
    80% 100%, /* 底部，距离右侧20%处 */
    0% 100% /* 左下角 */
  );
}

无论元素的宽度和高度是多少，右下角剪切出一个固定大小的三角形（比如 20px × 20px）。

clip-path: polygon(
  0% 0%,              /* 左上 */
  100% 0%,            /* 右上 */
  100% calc(100% - 20px),  /* 右侧偏移底部20px */
  calc(100% - 20px) 100%,  /* 底部偏移右侧20px */
  0% 100%             /* 左下 */
);