用HTml+csss实现优惠券

优惠券主要是做两边的波浪，主要用到的是css3多背景拼接，效果图：

代码：
html:

    <div class="list">
        <div class="item">
            <div class="left">
                <div class="block">
                    <el-row>
                        <el-col :span="11">
                            <p class="first"><span>￥</span><span>50元</span></p>
                            <p class="second"><span>满100可用</span></p>
                        </el-col>
                        <el-col :span="13">
                            <p class="third"><span>美食优惠券</span></p>
                            <p class="fourth"><span>有效期：2019.10.2020.10.22</span></p>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <div class="right"><p>立即领取</p></div>
        </div>
    </div>

css：

 .list{
            .item{
                overflow: hidden;
                margin:10px 20px;
                .left{
                    float: left;
                }
                .left{
                    position: relative;
                    width: 500px;
                    height: 190px;
                    background-image: 
                    radial-gradient(
                    circle at 1px 8px, 
                    transparent 6px, 
                    #fff 6px, 
                    #fff 0px);
                    background-size: 500px 18px;
                    background-position: 0 0, 500px 0;
                    background-repeat-x: no-repeat;
                    .block{
                        margin:15px;
                        .first,.third{
                            padding:20px 20px;
                            
                        }
                        .second,.fourth{
                            padding:10px 20px;
                            color:#888;
                        }
                        .first{
                            color:#f60d0b;
                            span:nth-child(1){
                                font-size:30px;
                            }
                            span:nth-child(2){
                                font-size:48px;
                            }
                        }
                        .third{
                            color:#000;
                            font-size:36px;
                        }
                    }
                    }
                .right{
                    position: relative;
                    width:200px;
                    height:190px;
                    background-image: 
                    radial-gradient(
                    circle at 199px 8px, 
                    transparent 6px, 
                    #409EFF 6px, 
                    #409EFF 0px);
                    background-size: 200px 18px;
                    background-repeat-x: no-repeat;
                    margin-left:500px;
                    p{
                        width:100px;
                        height:100%;
                        margin:0 auto;
                        color:#fff;
                        line-height:100px;
                        text-align:center;
                        font-size:44px;
                    }
                    }
                }
            }

详见：

最后

以上就是顺利自行车为你收集整理的用HTml+csss实现优惠券的全部内容，希望文章能够帮你解决用HTml+csss实现优惠券所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。