CSS Clip-path实现反转文件夹形状：如何设置X轴100%附近静态点？

你之前用百分比定义clip-path的多边形路径时，遇到内容过多导致顶部折角拉伸的问题，改用固定px单位解决了这个问题。要实现X轴反转的文件夹形状（折角从左侧转到右侧），关键是利用calc()函数定位靠近X轴100%（右侧）的静态点，具体实现如下：

原文件夹形状代码（折角在左侧） #

.frame-folder {
  clip-path: polygon(0% 0%, 150px 0%, 200px 80px, 100% 80px, 100% 100%, 0% 100%);
  background-color: #000000;
}

X轴反转的文件夹形状代码（折角在右侧） #

.frame-folder-reverse {
  clip-path: polygon(0% 0%, 100% 0%, calc(100% - 150px) 0%, calc(100% - 200px) 80px, 0% 80px, 0% 100%, 100% 100%);
  background-color: #000000;
}

关键逻辑说明 #

• 用calc(100% - 数值px)定义右侧静态点：比如calc(100% - 150px) 0%代表从容器右侧往左150px的顶部位置，calc(100% - 200px) 80px代表从容器右侧往左200px、向下80px的位置。
• 这种写法既保留了px单位的固定性（避免折角随容器宽度拉伸），又能适配不同宽度的容器，折角始终固定在右侧的指定位置。

内容的提问来源于stack exchange，提问作者Mohamad Abyannaufal