CSS 角标丝带与徽章（ribbon 和 badge）
选择样式、文字和角落。丝带只用一个元素制作，并会随文字大小自动调整。
使用方法卡片角落的“热销”标记
可用语言: 
广告
CSS 角标丝带与徽章（ribbon 和 badge）: 用途
角落里的丝带可以突出最受欢迎的套餐、新品或促销，而无需改动卡片的其余部分。可选择斜角丝带、圆形徽章、标签或折角条，以及文字、角落、颜色和大小。
代码附带示例卡片和丝带的 CSS，丝带只用一个元素制作：斜放时，卡片用 overflow hidden 裁掉多出的部分。预览会即时显示结果，页面也会说明每种样式的适用场景。
使用方法
- 选择样式和文字。
- 调整角落、颜色和大小。
- 复制代码。
使用场景
- 价格表中突出的套餐。
- 新品或促销商品。
- 照片上的折扣徽章。
常见问题
丝带如何在角落被裁切？
给卡片设置 overflow: hidden 和 position: relative。
读屏软件会读出丝带吗？
会，因为文字在 HTML 中。如果徽章只是重复卡片里已有的内容，可以给丝带加上 aria-hidden="true"，避免被朗读两次。
该用哪种样式？
斜角丝带最醒目，适合突出的套餐。圆形徽章适合在商品照片上标注折扣（‘-20%’），标签最低调，适合条目很多的列表。
真的免费吗？
是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。