Как настроить размещение и размер лент CSS ⇐ CSS

[Anonymous]

Я использую следующий код для отображения ленты в правом верхнем углу элемента div, и мне нужна помощь в перемещении ее в левую часть, чтобы полосы ленты располагались справа (перевернутые):
В элементе div размещается следующий HTML-код:

Код: Выделить всё

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

Код: Выделить всё

Ribbon Text

Я пробовал использовать разные значения вставки и заполнения, но, похоже, это не смещает ленту справа налево и не меняет местами полосы.
Может кто-нибудь указать мне правильное направление, какие значения изменить?

Подробнее здесь: https://stackoverflow.com/questions/769 ... ement-size