用CSS做优惠券背景,优惠券的本质其实是一个短期刺激消费的工具,它与积分刚好构成了日常营销的基本工具。消费者使用优惠券的目的不言而喻,当然是为了省钱。而同时,也为商家做了无形的广告。
一、左半圆效果
<style style="text/css"> .coupon { width: 240px; height: 100px; margin-top: 15px; background-color: #ff6347; -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); } </style> <div class="coupon"></div>
二、左右半圆效果
<style type="text/css"> .coupon2 { width: 240px; height: 100px; margin-top: 15px; background-color: #F56C6C; -webkit-mask: radial-gradient(circle at 0, #0000 20px, red 0), radial-gradient(circle at right, #0000 20px, red 0); -webkit-mask-size: 51%; -webkit-mask-position: 0, 100%; -webkit-mask-repeat: no-repeat; } </style> <div class="coupon2"></div>
三、左内圆效果
<style type="text/css"> .coupon3 { width: 240px; height: 100px; margin-top: 15px; background-color: #F56C6C; -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); } </style> <div class="coupon3"></div>
四、四角收缩效果
<style type="text/css"> .coupon4 { width: 240px; height: 100px; margin-top: 15px; background-color: #F56C6C; -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0); -webkit-mask-position: -20px -20px; } </style> <div class="coupon4"></div>
更多完整的代码请参考:https://blog.csdn.net/yx_back/article/details/138327172
如需转载请保留本文出处: https://www.zhe94.com/975.html