如何镜像CSS clip-path实现的产品盒丝带效果适配左侧

核心实现逻辑是沿垂直轴对原有丝带样式做水平翻转，不需要重构整体样式，仅需要调整定位、内边距、裁剪路径的水平方向坐标映射即可，调整后可完美适配产品盒左侧位置。

调整后可直接使用的左侧丝带代码 #

.ribbon-left {
  --f: 10px; /* 控制折叠部分尺寸 */
  --r: 0px; /* 控制丝带尖角形状 */
  --t: 10px; /* 控制丝带偏移量 */

  position: absolute;
  /* 原右侧样式是向左溢出，镜像后改为向右溢出，和原样式保持同高度（顶部偏移） */
  inset: var(--t) calc(-1.4 * var(--f)) auto auto;
  /* 左右内边距互换，适配翻转后的尖角位置 */
  padding: 0 calc(10px + var(--r)) var(--f) 10px;
  /* 所有裁剪点的X轴坐标做100%减原值的镜像映射，Y轴坐标保持不变 */
  clip-path: polygon(
    100% 0,
    0 0,
    0 calc(100% - var(--f)),
    var(--f) 100%,
    var(--f) calc(100% - var(--f)),
    100% calc(100% - var(--f)),
    calc(100% - var(--r)) calc(50% - var(--f)/2)
  );
  background: #BD1550;
  /* 折叠部分的内阴影为垂直方向，翻转后无需调整 */
  box-shadow: 0 calc(-1 * var(--f)) 0 inset #0005;
}

关键调整点说明 #

• 定位属性：原右侧丝带通过左负偏移伸出盒外，镜像后改为右负偏移伸出盒外；如果需要和原右侧丝带保持底部对齐的位置，只需要把inset属性改为inset: auto calc(-1.4 * var(--f)) var(--t) auto;即可
• 内边距：原左侧预留的尖角位置内边距，翻转后转移到右侧，保证文字内容不会被裁剪区域遮挡
• 裁剪路径：对polygon所有点的水平坐标做镜像换算，垂直坐标完全保留，保证折叠效果、尖角形状和原样式完全一致，仅方向翻转

注意：使用时需要给产品盒父元素添加position: relative，确保丝带绝对定位相对于产品盒生效。

内容的提问来源于stack exchange，提问作者Joost Boer