css3折扣券锯齿效果

前端入坑纪 61

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

好，详解如下！

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

爱是一道光,折扣多不慌

HTML 结构

        <div class="quan clear">
            <div class="quanLeft">
                <p class="money">¥ 10</p>
                <p class="tit">美味立享折扣券</p>
                <p class="conts">无满额限制,立减折扣</p>
                <p class="dates">有效期: 2018.8.12 - 2019.8.12</p>
            </div>
            <div class="quanRight">
                <p class="ft">折扣券</p> 
                <p class="sd">官网使用</p>
            </div>
        </div>

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 领红包，领到大红包的小伙伴赶紧使用哦！

支持你我，扫一扫红包