用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; } } } } 

详见:

原文链接:https://blog.csdn.net/qq_36655511/article/details/102736808?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165277499316782184681137%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165277499316782184681137&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-26-102736808-null-null.nonecase&utm_term=%E4%BC%98%E6%83%A0

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
文明发言,共建和谐米科社区
提交
头像

昵称

取消
昵称表情图片