CSS伪元素实现角标并带对勾图标效果（完整代码）
在网页开发中，为卡片、优惠券等元素添加角标可以突出状态或信息。本文分享一种纯CSS实现方法，利用伪元素和border属性绘制右下角角标，并在角标内嵌入对勾图标，无需额外图片或字体图标。实现原理是通过 ::after 伪元素绘制红色三角作为角标背景，再通过 ::before 伪元素绘制白色对勾线条，两者叠加形成完整效果。核心利用 border 的透明和颜色组合构造三角形，以及边框变形绘制对勾。
完整CSS代码如下：
.coupon_card.active {
border: 1px solid #f32121;
position: relative;
}
.coupon_card.active::after {
content: '';
position: absolute;
right: 0;
bottom: 0;
border-width: 0 0 20px 20px;
border-style: solid;
border-color: transparent transparent #f32121;
}
.coupon_card.active::before {
content: '';
position: absolute;
width: 10px;
height: 6px;
background: transparent;
bottom: 4px;
right: 2px;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-55deg);
-ms-transform: rotate(-55deg);
transform: rotate(-55deg);
z-index: 9;
}
**关键属性解读：**
- `.coupon_card.active` 设置相对定位，作为伪元素的定位参考，同时改变边框颜色突出激活状态。
- `::after` 使用 border 绘制三角形：border-width 设定为 0 0 20px 20px，即只有下边框和左边框有宽度，其他为0。通过 border-color 将下边框设为红色（#f32121），左边框及其他设为透明，形成右下角红色三角。
- `::before` 绘制对勾：利用两个白色边框（宽2px），去掉上边框和右边框，形成直角折线。然后通过 transform: rotate(-55deg) 旋转角度，使其呈现对勾造型。配合 bottom:4px right:2px 微调位置，让对勾恰好落在三角内部。
**适用场景：**
该方案适合优惠券、卡片、商品标签等需要突出某项状态的元素。只需在HTML结构上添加 active 类名即可切换角标显示。由于完全依赖CSS，无额外请求，性能优秀，且支持响应式调整（通过修改 border-width 和定位值改变角标大小）。
**注意事项：**
- 父元素必须设置 position: relative，否则伪元素会相对于非定位祖先定位。
- 对勾的旋转角度（-55deg）需根据实际视效微调，不同字体和屏幕密度下可能需调整。
- 如需更改角标颜色，修改 ::after 的 border-color 中最后一个色值即可。
- 该样式仅用于带 active 类的元素，未添加 active 时无角标显示，便于状态切换。
通过以上代码，可以快速实现带对勾图标的角标效果，提升界面细节和用户体验。无需依赖任何外部资源，是前端开发的实用技巧。
（注：原文效果图因本文为纯文本教程，未包含，请在实际浏览器中测试效果。）
Re: CSS伪元素实现角标并带对勾图标效果（完整代码）
谢谢分享，这个纯CSS实现角标加对勾的方案很实用，完全不依赖外部资源，代码也清晰易懂。尤其对勾用两个边框旋转来模拟，思路很巧妙。我之前做类似效果往往要引入字体图标，你这个方法更轻量。我有个小疑问：对勾的旋转角度设为-55deg，如果角标大小改变（比如调大border-width），这个角度是否需要重新微调？或者有没有更通用的角度让对勾在不同尺寸下都适配？期待你的进一步经验。Re: CSS伪元素实现角标并带对勾图标效果（完整代码）
这个纯CSS实现角标的方法很实用，代码简洁且没有额外依赖，对前端优化很有帮助。特别是用border画三角配合伪元素画对勾的思路，学到了一招。感谢分享！Re: CSS伪元素实现角标并带对勾图标效果（完整代码）
这个方法很实用，纯CSS实现角标确实简洁高效，尤其是不依赖外部资源这点很棒。我之前也试过类似方案，但对勾的旋转角度调了半天才合适，你提到的-55deg是个不错的参考值。有个小问题想请教：如果想让角标出现在左上角，大概需要怎么调整定位和border的方向组合？
页:
[1]