Html 在另一侧放置CSS功能区

我想创建一个围绕容器的功能区

我已经阅读了以下教程：

但是，我想在左侧创建一个功能区，而不是右侧

你会认为这是一个微不足道的改变，但我真的很挣扎！我试着翻转旋转，从右向左改变方向，但结果看起来很奇怪

下面是代码的JS提琴（与URL非常相似，但代码较少）

以下是HTML代码：

 <div class="corner-ribbon-main-wrapper"><div class="ribbon-wrapper"><div class="ribbon">SALE!</div></div></div>

更新

---

删除SCS并将其转换为普通CSS

只需添加到

.ribbon

：

transform: rotate(-45deg);
left: -30px;

并将容器放置在以下位置：

left: -3px;

没有正确的价值观

---

我已经修改了你的小提琴，这是你需要的吗

---

您似乎已经得到了它，但是为什么

左-30px

原来是

左-5px

？该值是色带相对于其容器的水平位置

色带包装

根据正方形的旋转，您需要不同的值来隐藏“角”您不想显示将它们移出包装器。。。我知道这似乎令人困惑，我不是很好地解释它，但如果你用crhome Inputer（或simillar）输入你的小提琴，并一步一步地更改值（选择左值和上下箭头），你会很快得到它。

left: -3px;

.ribbon-wrapper {
  top: -3px; 
  left: -3px; /* Changed */
}