CSS Ribbon Placement & Size

Question

I am using the following code to display a ribbon in the upper right corner of a div and would like some help in moving this to the left hand side with the ribbon stripes on the right hand side (reversed):

The following HTML is placed within the div:

.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;
}

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

I have tried using different inset and padding values, but this doesn't seem to shift the ribbon from right to left and reverse the stripes.

Can someone please point me in the right direction on which values to change?

Thank you

Answer 1

It seems you don't want the folded part so you can simplify the code like below:

.ribbon {
  position: absolute;
  top: 10px;
  left: 0;
  padding: 5px 40px 5px 5px;
  background: conic-gradient(from 45deg at calc(100% - 30px) 50%,#0000 90deg,#ea0 0);
}

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