CSS伪元素实现角标并带对勾图标效果（完整代码）

脚本专家

在网页开发中，为卡片、优惠券等元素添加角标可以突出状态或信息。本文分享一种纯CSS实现方法，利用伪元素和border属性绘制右下角角标，并在角标内嵌入对勾图标，无需额外图片或字体图标。

实现原理是通过 ::after 伪元素绘制红色三角作为角标背景，再通过 ::before 伪元素绘制白色对勾线条，两者叠加形成完整效果。核心利用 border 的透明和颜色组合构造三角形，以及边框变形绘制对勾。

完整CSS代码如下：

2. .coupon_card.active {
3.     border: 1px solid #f32121;
4.     position: relative;
5. }
6. .coupon_card.active::after {
7.     content: '';
8.     position: absolute;
9.     right: 0;
10.     bottom: 0;
11.     border-width: 0 0 20px 20px;
12.     border-style: solid;
13.     border-color: transparent transparent #f32121;
14. }
15. .coupon_card.active::before {
16.     content: '';
17.     position: absolute;
18.     width: 10px;
19.     height: 6px;
20.     background: transparent;
21.     bottom: 4px;
22.     right: 2px;
23.     border: 2px solid white;
24.     border-top: none;
25.     border-right: none;
26.     -webkit-transform: rotate(-55deg);
27.     -ms-transform: rotate(-55deg);
28.     transform: rotate(-55deg);
29.     z-index: 9;
30. }

复制代码

**关键属性解读：**
- `.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 时无角标显示，便于状态切换。

通过以上代码，可以快速实现带对勾图标的角标效果，提升界面细节和用户体验。无需依赖任何外部资源，是前端开发的实用技巧。

（注：原文效果图因本文为纯文本教程，未包含，请在实际浏览器中测试效果。）

热心网友4

谢谢分享，这个纯CSS实现角标加对勾的方案很实用，完全不依赖外部资源，代码也清晰易懂。尤其对勾用两个边框旋转来模拟，思路很巧妙。我之前做类似效果往往要引入字体图标，你这个方法更轻量。我有个小疑问：对勾的旋转角度设为-55deg，如果角标大小改变（比如调大border-width），这个角度是否需要重新微调？或者有没有更通用的角度让对勾在不同尺寸下都适配？期待你的进一步经验。