使用纯 CSS，借助 border-radius、box-shadow 以及 ::before/::after 伪元素，就可以实现常见的斜切优惠券卡片样式：通过 ::before 在左上角绘制浅色三角形，再用 ::after 在右下角反向绘制对应切角，两个伪元素都应使用 absolute 定位，同时 z-index 要低于正文内容；金额区域建议使用 tabular-nums 等宽数字、1.8em 字号和暖灰色背景，以增强识别度；在响应式布局中，伪元素尺寸更适合使用 vw 或 em，阴影强度可通过 clamp() 控制，打印场景下则建议关闭 box-shadow。
直接使用 border-radius + box-shadow + 伪元素，就能制作出常见的 CSS 优惠券卡片效果，无需额外引入 SVG 或图片资源。
用 ::before 和 ::after 模拟优惠券斜角切口
常见的优惠券设计通常会带有左上角和右下角的斜切边，使用纯 CSS 通过两个伪元素叠加即可实现：
::before在左上角绘制一个浅色三角形覆盖层，用来模拟裁切后的视觉效果::after在右下角采用相同思路处理，只是绘制方向相反- 两个伪元素都应设置为
position: absolute，同时父级容器必须设置relative - 要特别注意 z-index 层级关系：伪元素层级应低于卡片正文内容，避免遮挡文字信息
示例关键片段：
.coupon {
position: relative;
}
.coupon::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-top: 20px solid #f5f5f5;
border-right: 20px solid transparent;
}
让优惠金额更醒目的字体与配色技巧
优惠金额必须让用户第一眼就能看到，但不建议单纯依赖粗暴加粗来实现：
- 使用
font-variant-numeric: tabular-nums可以让数字保持等宽显示，避免“1”和“8”宽度不同造成排版错位 - 建议将金额区域单独包裹在
中，并设置font-size: 1.8em+line-height: 1，防止行高被撑大影响布局 - 背景色不建议使用纯白，可选择
#fff9f0这类暖灰或米白色底，更柔和且具备足够对比度 - 不要用
text-shadow强行做“立体字”效果，这种写法在移动端容易发糊，也不利于界面观感
响应式布局下切口和阴影的适配细节
在小屏设备上，斜切边容易被压缩变形，阴影参数如果设置不当，也很容易显得发灰发糊：
- 可在
@media (max-width: 480px)中将伪元素的border尺寸缩小一半，例如从20px调整为10px box-shadow的blur值通常建议控制在8px以内，大屏场景可适当放宽到12px，但不要写死，结合clamp()会更稳定，例如：box-shadow: 0 2px 0.5rem rgba(0,0,0,0.08)- 切角尺寸和位置如果固定使用
px，在不同屏幕下适配性较差，改用vw或em更适合响应式设计，例如border-top: 3vw solid #f5f5f5
另一个很容易被忽略的细节是打印样式——有些用户会截图保存，甚至直接打印优惠券卡片，因此建议补充 @media print { box-shadow: none; }，否则打印时阴影和切口可能会变成一片黑块，影响最终展示效果。
