HTML css 实现各种优惠背景效果

用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