如何调整CSS Ribbon位置至左侧并翻转条纹？

我使用以下代码在div的右上角显示CSS Ribbon，希望将其移至左侧，同时让Ribbon的条纹位于右侧（翻转状态）：

HTML代码（放置在div内部）：

<span class="ribbon">Ribbon Text</span>

原CSS代码：

.ribbon {
  --f: 1px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 5px; /* the top offset */
  
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: #ea0;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

我尝试修改不同的inset和padding值，但无法将Ribbon从右侧移至左侧并翻转条纹，恳请告知需要调整哪些参数？

只需调整3个核心属性即可实现左侧翻转的Ribbon效果：

• 调整定位属性inset：将右侧定位改为左侧，替换为 inset: var(--t) auto auto calc(-1*var(--f));，让Ribbon固定在容器左上角。
• 调整内边距padding：交换左右内边距的计算逻辑，替换为 padding: 0 calc(10px + var(--r)) var(--f) 10px;，避免文本被裁剪。
• 翻转裁剪路径clip-path：修改多边形顶点顺序，让折角出现在右侧，替换后的路径为：

  clip-path: 
    polygon(100% 0,0 0,0 calc(100% - var(--f)),calc(var(--f)) 100%,
      calc(var(--f)) calc(100% - var(--f)),100% calc(100% - var(--f)),
      calc(100% - var(--r)) calc(50% - var(--f)/2));
  

完整修改后的CSS代码：

.ribbon {
  --f: 1px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 5px; /* the top offset */
  
  position: absolute;
  inset: var(--t) auto auto calc(-1*var(--f));
  padding: 0 calc(10px + var(--r)) var(--f) 10px;
  clip-path: 
    polygon(100% 0,0 0,0 calc(100% - var(--f)),calc(var(--f)) 100%,
      calc(var(--f)) calc(100% - var(--f)),100% calc(100% - var(--f)),
      calc(100% - var(--r)) calc(50% - var(--f)/2));
  background: #ea0;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

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