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>

缩写
.coupon4 {
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; 
}

五、六角收缩效果

复制代码
<style type="text/css">
.coupon5 {
  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;
  -webkit-mask-size: 50%;
}
</style>
<div class="coupon5"></div>

缩写
.coupon5 {
  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; 
}

六、凹边效果

复制代码
<style type="text/css">
.coupon6 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #F56C6C;
  -webkit-mask: radial-gradient(circle at 10px, #0000 10px, red 0); 
  -webkit-mask-position: -10px;
  -webkit-mask-size: 100% 30px;
}
</style>
<div class="coupon6"></div>

七、中排圆点效果

复制代码
<style type="text/css">
.coupon7 {
  width: 300px;
  height: 130px;
  margin-top: 15px;
  background-color: #F56C6C;
  -webkit-mask: radial-gradient( circle at 50%, red 5px, transparent 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
}
</style>
<div class="coupon7"></div>

八、两边凹陷效果

复制代码
<style type="text/css">
.coupon8 {
  width: 240px;
  height: 100px;
  margin-top: 15px;
  background-color: #F56C6C;
  -webkit-mask: radial-gradient( circle at 5px, red 5px, transparent 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, transparent 20px, red 0) -20px -20px / 50%;
  -webkit-mask-composite: destination-out;
}
</style>
<div class="coupon8"></div>
相关推荐
编程社区管理员几秒前
「2025最新版React+Ant Design+Router+TailwindCss全栈攻略:从零到实战,打造高颜值企业级应用
前端·react.js·前端框架
DJA_CR几秒前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
前端爆冲11 分钟前
项目中无用export的检测方案
前端
旧味清欢|21 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾39 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿2 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly