Html 图像上方的带角css

我正在尝试在图像上创建一个带角的色带。如下面的屏幕截图所示，我想在已售出的商品上显示“已售出”功能区

下面是指向代码笔的链接，我在其中使用Bootstrap4显示了项目。到目前为止，我能够显示售出的功能区，但不知何故，它出现在屏幕顶部，而不是图像/项目。如果有人引导我在售出的商品上展示售出的丝带，那将是非常有帮助的。据你所知，我在CSS方面的经验很少

代码笔：

以下是我为显示功能区而创建的示例代码：

/*色带*/
.角丝带{
字体大小：粗体；
宽度：200px；
背景：#e43；
位置：绝对位置；
顶部：25px；
左：-50px；
文本对齐：居中；
线高：100px；
字母间距：1px；
颜色：#f0；
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
}
/*自定义样式*/
.corner-ribbon.sticky{
位置：固定；
}
.corner-ribbon.shadow{
长方体阴影：0 3pxRGBA（0,0,0,3）；
}
/*不同位置*/
.左上角{
顶部：-10px；
左：-103px；
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
背景色：红色；
宽度：256px；
高度：75px；
}

因为您使用了

位置：固定。角功能区

，代码>而不是绝对值。您还需要一个

溢出：隐藏用于.card类。以下是工作示例：


/*色带*/
.角丝带{
字体大小：粗体；
宽度：200px；
背景：#e43；
位置：绝对位置；
顶部：25px；
左：-50px；
文本对齐：居中；
线高：100px；
字母间距：1px；
颜色：#f0；
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
}
.卡片{
溢出：隐藏；
}
.corner-ribbon.shadow{
盒影：0.0 3pxRGBA（0,0,0,3）；
}
/*不同位置*/
.左上角{
顶部：-10px；
左：-103px；
变换：旋转（-45度）；
-webkit变换：旋转（-45度）；
背景色：红色；
宽度：256px；
高度：75px；
}

关于
在下面添加一些有关专辑、作者或任何其他背景的信息。写几句话，这样人们就可以了解一些信息性的花边新闻。然后，将他们链接到一些社交网站或联系信息
接触





出售
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
看法
编辑
9分钟
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
看法
编辑
9分钟
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
看法
编辑
9分钟
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
看法
编辑
9分钟
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
看法
编辑
9分钟
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
看法
编辑
9分钟
这是一张更宽的卡片，下面的支持文本是附加内容的自然引入。这个内容有点长
看法
编辑
9分钟
.corner {
 width: 0; 
height: 0; 
border-top: 120px solid #ffc107;
border-right: 120px solid transparent;
position:absolute;
left:27px;
top:12px;
}
.corner span {
 position:relative;
 top: -99px;
 left: 31px;
 text-align: center;
 font-size: 13px;
 font-family: arial;
 transform: rotate(-45deg);
 font-weight:600;
 display:block;
 }

 <div class="row">
  <div class="col-sm-12">
    <div class="col-sm-3">
      <div class="thumbnail">
        <div class="corner"><span>20% Special Offer</span></div>
         <a href="#">
          <img style="height:200px;width:250px;" src="SAMPLE.PNG " > 
       </a> 
      <div class="caption text-center">
       <h5 class="cus"> sample ji </h5>
      </div>
    </div>
 </div>
 </div>