用纯 CSS 实现优惠券剪卡风格

2022 年 10 月 05 日
广东
本文字数：2774 字
阅读完需：约 9 分钟

在做商城类项目的时候，我们可能都会经历过“优惠券”这类需求，笔者在过往工作中，都是直接要求 UI 切图来实现，直到有一天产品告诉我一个奇思妙想：这个优惠券的宽度会随内容变化的！一下子让我陷入了人生的大思考，这样图片方式可不好整呐，因此萌生一个想法：能不能用纯 css 实现这些效果呢？

0. 内倒角

首先我们来看下 css 如何实现内倒角

.card {    width: 200px;    height: 100px;    position: relative;    background-image:         radial-gradient(circle at left 50px, #fff, #fff 10px, transparent 10px),        radial-gradient(circle at right 50px, #fff, #fff 10px, transparent 11px),        radial-gradient(circle at 100px top, #fff, #fff 10px, transparent 11px),        radial-gradient(circle at 100px bottom, #fff, #fff 10px, transparent 11px);    background-color: red;}

复制代码

效果图：

其实最先想到的是画圆形，在这个例子当中，主要是利用了设置背景图的属性与 radial-gradient 渐变来实现，实际效果差不多，在形状上呢还是保持整体方形，相信大家也看出来副作用，首先这个添加的渐变需要和背景颜色同步，比如设置的倒角是白色，背景是灰色的，那就露馅啦。

1. 实现虚线

上面实现了内倒角，接下来就要考虑虚线了，既然要纯 css，能不能把虚线也给优雅地实现了呢，其实线性渐变就可以做到，一起来看看：

.line {    width: 100%;    height: 1px;    background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);    background-size: 12px 1px;    background-repeat: repeat-x;}

复制代码

代码效果：

/* 稍微调整下size属性就能改变虚线宽度 */background-size: 20px 1px;

复制代码

2. 实现波浪框

同样是利用径向渐变，我们尝试下波浪框效果：

.card {    background: red;    width: 200px;    height: 100px;    position: relative;}.card:after {    content: '';    position: absolute;    top: 0px;    bottom: 0px;    left: -5px;    width: 10px;    height: 100%;    background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);    background-size: 10px 10px;}

复制代码

3. 组合

通过以上例子，优惠券剪卡风格的效果已经呼之欲出了，我们只需要把这些效果组合起来，对颜色位置宽度等细节进行调整~

竖型优惠券例子效果：

.card1 {    width: 120px;    height: 150px;    position: relative;    background-image:         radial-gradient(circle at left 90px, #fff, #fff 10px, transparent 10px),        radial-gradient(circle at right 90px, #fff, #fff 10px, transparent 11px);    background-color: red;    border-radius: 4px;}
.card1 > .line {    position: absolute;    bottom: 60px;    left: 14px;    width: 96px;    height: 1px;    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);    background-size: 12px 1px;    background-repeat: repeat-x;}

复制代码

究极组合，横型优惠券剪卡风格效果：

.card2 {    width: 200px;    height: 100px;    position: relative;    background-image:         radial-gradient(circle at 130px top, #fff, #fff 10px, transparent 11px),        radial-gradient(circle at 130px bottom, #fff, #fff 10px, transparent 11px);    background-color: red;    border-radius: 4px;}
.card2 > .line {    position: absolute;    top: 50px;    right: 31px;    width: 78px;    height: 1px;    background-image: linear-gradient(to right, #ffffff 0%, #ffffff 50%, transparent 50%);    background-size: 12px 1px;    background-repeat: repeat-x;    transform:rotate(90deg);}
.card2:after {    content: '';    position: absolute;    top: 0px;    bottom: 0px;    right: -5px;    width: 10px;    height: 100%;    background: radial-gradient(circle, #ffffff, #ffffff 4px, transparent 5px);/* 这里可以优化一下，变为半圆，right也可以设置为0了 */    background: radial-gradient(circle at right, #ffffff, #ffffff 4px, transparent 5px);    background-size: 10px 14px;}

复制代码

是不是有那么点味道了呢，仅用径向渐变和线性渐变就能做出来效果，一想到 UI 小姐姐都不用切图给我，可以早早下班回去陪她男朋友了，我赶紧向她展示了成果，没想到小姐姐跟我说，你这没阴影不好看呀，这下子让我又一次陷入了人生的大思考。

回到工位上，我放弃了思考，颤抖的手胡乱地加了一个 shadow，果然，露馅了啊！

但是我们要冷静，之前的思路是先画一个方形，然后放置圆形或半圆叠盖，所以最终还是会原形毕露，结果还是必须掏空那段半圆缺口啊，可 css 明显是做不到的

等等，这时候就需要逆转想法，不是先画一个方形再剔除半圆，而是一开始就不画半圆这个缺口，将整个不规则形状填充出来，也就不需要剔除半圆了，先来看看下面这段 css 以及它的效果：

width: 300px;  height: 100px;  background:   radial-gradient(circle at right bottom, blue 10px, red 0) top right /50% 50px no-repeat,  radial-gradient(circle at right top, blue 10px, orange 0) bottom right / 50% 50px no-repeat,  radial-gradient(circle at left top, blue 10px, yellow 0) bottom left / 50% 50px no-repeat,  radial-gradient(circle at left bottom, blue 10px, green 0) top left / 50% 50px no-repeat;

复制代码

按这个思路将上面的例子转为画上下两瓣方形，给透明径向渐变绘制的 circle 以外的区域填上颜色，而阴影部分就用 filter 来处理

.card2 {    width: 200px;    height: 100px;    position: relative;    background:         radial-gradient(circle at 130px top, transparent 10px, red 0) top / 100% 51px no-repeat,        radial-gradient(circle at 130px bottom, transparent 10px, red 0) bottom / 100% 51px no-repeat;    border-radius: 4px;    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));    /* box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2); */}.card2 > .line {    /* 没变化 */}