Html 在套餐计划中添加广告横幅

我曾在其他网站上看到过这种做法，我想知道是否有一种方法可以将其添加到我的网站，而不必使用HTML和CSS的外部图像。所以，在我的网站上，我的页面上有“卡片”，在这些卡片上，每个卡片上都有包裹，有些计划比其他更好，我想展示。卡片右上角有这样的东西 它有“最佳价值”之类的文字。我需要用一个图像来覆盖文本吗？还是有办法用css来实现

<div class="col-md-4">
            <div class="card">
                <div class="cardTitle">
                    <h1 class="text-center">Basic Plan</h1>
                </div>
                <hr class="cardRuler">
                <div class="cardBody">
                    <ul>
                        <li>Lorem</li>
                        <li>Lorem</li>
                        <li>Lorem</li>
                        <li>Lorem</li>
                    </ul>
                </div>
                <div class="cardFooter">
                    <button class="btn button-Primary center-block">Learn More</button>
                </div>
            </div>
        </div>

基本计划


洛勒姆
洛勒姆
洛勒姆
洛勒姆

了解更多

您可以使用纯CSS中容器上的：before和：after伪元素制作这样的功能区

.ribbon{
字体大小：16px！重要；
宽度：50%；
位置：相对位置；
背景#ba89b6；
颜色：#fff；
文本对齐：居中；
填料：1米2米；
保证金：2em自动3em；
}
.ribbon:之前，.ribbon:之后{
内容：“；
位置：绝对位置；
显示：块；
底部：-1米；
边框：1.5em实心#986794；
z指数：-1；
}
.ribbon:之前{
左：-2米；
右边框宽度：1.5em；
左边框颜色：透明；
}
.ribbon:之后{
右：-2米；
左边框宽度：1.5em；
右边框颜色：透明；
}
.ribbon.ribbon内容：在.ribbon之前。ribbon内容：在.ribbon之后{
内容：“；
位置：绝对位置；
显示：块；
边框样式：实心；
边框颜色：#804f7c透明；
底部：-1米；
}
.ribbon.ribbon内容：之前{
左：0；
边框宽度：1米0.1米；
}
.ribbon.ribbon内容：在{
右：0；
边框宽度：1米1米0；
}

随机内容