css3优惠卷上方锯齿_css3折扣券锯齿效果

前端入坑纪 61

今天来分享 有次在app上看到的折扣券的图

好，详解如下！

OK，first things first！ 点我查看实际效果

爱是一道光,折扣多不慌

HTML 结构

div. quan 负责绘制最左侧锯齿, div. quanLeft负责绘制中间的圆点线, div. quanRight 负责绘制最右侧锯齿

CSS 结构

.quan{

position: relative;

width: 96%;

margin: 5% auto;

padding: 6px;

padding-right:0;

box-sizing: border-box;

background-color: #ff6347;

color: #fff;

background-image: radial-gradient(#fff 35%,#ff6374 35%);

background-size: 17px 17px;

background-position: -9px 0;

background-repeat: repeat-y

}

完全的css在示例里了,这里粘贴关键的css. 通过使用 radial-gradient渐变方法来得到效果.这个设置的原理和前面有一篇进度条是一样的,把渐变限制在一定范围,这样颜色就出现了很明显的隔断,而没有过渡.

将通过radial-gradient渐变生成的圆形,竖着排开,定位到相应的位置上.以最左侧为例,白色的圆圈,覆盖在橘色的边缘上,页面最底下是白色的背景，这样自然就有了锯齿的效果.其他两条,同理.

好了，到此，本文告一段落！感谢您的阅读！祝你身体健康，阖家幸福！

打开支付宝首页搜 625097528 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包