布衣重九
布衣重九
11天前 · 0 人阅读
前端入坑纪 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 领红包,领到大红包的小伙伴赶紧使用哦!
支持你我,扫一扫红包
收藏 0
折扣 锯齿 效果 css3
评论 ( 0 )