css绘制卡券优惠券_⽤纯css来实现⼀个优惠券
前⾔
我们在平时的⽹页中，经常会见到这样的优惠券或者其他的券(特征就是会有反⽅向的圆⾓)。
可能⼤部分前端⼈员为了简单，直接采⽤图⽚的⽅式，直接把整张图作为背景。其实这也没什么不好的，简单，⽅便，还没有兼容性问题，ie6跑起来都没得问题。
如果不考虑那些低旧浏览器的话，还是有办法直接⽤css来实现，有⼏个好处
1.扩展⽅便，⽐如之前是300 100的，现在要改成300 150的，就⼀⾏代码的事
2.没有图⽚，加载起来也更快了，也节省了带宽
思路
我们先实现⼤致的框架，左右两部分
html,body{
box-sizing:border-box;
margin:0;
padding:20px;
height:100%;
background:#fadaa7;
}
.coupon{
display:inline-block;
overflow:hidden;
border-radius:10px;
}
.coupon-left{
float:left;
width:150px;
height:150px;
background:#252525;
}
.coupon-con{
float:left;
width:350px;
height:150px;
background:#fff;
}
下⾯就来实现中间看着⽐较复杂的"凹槽"部分
我能想到跟圆⾓相关的有圆⾓、圆形、径向...这些吧
有⼈说svg也可以，确实svg什么都可以做，不光是这种形状，只要画个路径，填充⼀下就完事，这个⽐较通⽤，并不是这个特例，所以在这⾥不讨论⽤这个⽅式。
还有⼀个原因，svg⽣成的形状也是固定了的，只能等⽐缩放，不能做其他⾃适应了。
1.圆⾓
看到这样的形状，⼀般⼈可能会想会不会可以⽤border-radius的负值呢，毕竟像margin那些，使⽤负值往往可以带来意想不到的效果
.con{
border-radius:-10px;
}
很可惜，这种写法根本就是不合法的，在⾕歌浏览器上打开控制台可以看到直接被删除了。
2.圆形
虽然说这种思路不⾏，但是我们可以换⼀种思路。
假设我们现在有⼀个圆，它本⾝没有颜⾊，但是它有⼀个⿊⾊的边框
现在我们想象⼀下，假如这个圆的边框越来越⼤，外⾯有个容器如果超出就会隐藏，会发⽣什么呢
如果这个圆在右下⾓，那么就变成了这样
这不就是我们需要的吗？
现在我们⽤css来实现
根据上⾯的分析，我们背景的颜⾊应该是圆的边框的颜⾊，所以原背景要去掉
.coupon-left{
position:relative;
overflow:hidden;
/
*background:#252525*/
}
/*为了减少html的结构，我们使⽤伪元素*/
.coupon-left::before{
position:absolute;
width:20px;
height:20px;
top:-210px;
right:-210px;
border-radius:50%;
border:200px solid #252525;/*边框只要能够覆盖整个容器就⾏*/
}
这样就实现了⼀个凹槽。
本来以为这样下去，复制⼀下，改写⼀下就完事了的，结果发现没这么简单，因为现在形状是被裁剪出来的，所以我们不能让上⼀个圆⾓把整个都覆盖，不然下⾯的圆⾓就出不来了，这时我们要⽤到clip裁剪功能
关于clip这⾥简单介绍⼀下，我们⼀般会⽤到rect这个功能，有四个值，分别是上右下左
clip: rect(, , , );
这⾥我们改造⼀下我们刚才写的样式，添加如下代码
.coupon-left::before{
clip: rect(0,210px,285px,0);
}
这样就和下半部分隔离开来了，下⾯做下半部分的凹槽，我们⽤::after，写法完全⼀致，注意⼀下坐标
就⾏了
.coupon-left::after{
content: '';
position: absolute;
top: -210px;
display: block;
right: -210px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 200px solid #252525;
clip: rect(135px,210px,285px,0);
}
这样就完美的实现了两个凹槽，右边的原理同样，下⾯是完整的css代码
html,body{
box-sizing:border-box;
margin:0;
padding:20px;
height:100%;
background:#fadaa7;
}
.coupon{
display:inline-block;
overflow:hidden;
border-radius:10px;
}
.coupon-left{
float:left;
width:150px;borderbox
height:150px;
position:relative;
}
.coupon-left::before{
content: '';
position: absolute;
top: -210px;
display: block;
right: -210px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 200px solid #252525; clip: rect(0,210px,285px,0);
}
.coupon-left::after{
content: '';
position: absolute;
bottom: -210px;
display: block;
right: -210px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 200px solid #252525; clip: rect(135px,210px,285px,0); }
.coupon-con{
float:left;
width:350px;
height:150px;
position:relative;
}
.coupon-con::before{
content: '';
position: absolute;
top: -410px;
display: block;
left: -410px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 400px solid #fff;
clip: rect(0,800px,485px,410px);
}
.coupon-con::after{
content: '';
position: absolute;
bottom: -410px;
display: block;
left: -410px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 400px solid #fff;
clip: rect(335px,800px,485px,410px); }
下⾯是codepen演⽰
3.径向渐变
还有⼀个思路就是径向渐变。
那么怎样实现我们要的效果呢
我们先看看径向渐变的语法

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。