一、左半圆效果
<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>