css3实现优惠券效果（向内凹的圆）

coldriversnow

已于 2023-09-19 17:15:50 修改

阅读量1.7k

点赞数

文章标签： css

于 2021-03-09 14:13:39 首次发布

本文链接：https://blog.csdn.net/coldriversnow/article/details/114581767

版权

背景色和自身（优惠券）的颜色会改变，实现向内凹的圆效果，效果图如下。如果叫设计师切好几十种背景图是很不现实的，只能用代码来实现，性能会比较好。随着背景色的改变，向内凹圆的背景色也要跟着变，因此，向内凹陷的部分只能设置成透明。

实现如下三种情况：

1、第一种情况（纯色）

自身（优惠券）的颜色是纯色的，这个实现起来比较简单，主要代码如下

<div class="box"></div>
 .box{
      width: 160px;
      height: 100px;
      background-image: radial-gradient(circle at 9px 8px ,transparent 0%, transparent 8px,#e15852 8px, #e15852 100%);
      background-position: 121px -8px;
      background-size: 100% 100px;
    }

radial-gradient() 函数创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变。其语法是：

background: radial-gradient(shape size at position, start-color, ..., last-color);

background-position:圆画在优惠券的左边

background-size: （x,y）两个圆之间的距离

2、第二种情况（渐变，圆在左右两边）

可以把优惠券划分为三个部分：左边圆，中间主体，右边圆，主要代码如下：

<div class="box1"></div>
.box1 {
      width: 160px;
      height: 100px;
      background: radial-gradient(circle at 0 51px, transparent 15px, #fe8864 6px) top left, linear-gradient(0.25turn, #fe8864, #FE5151), radial-gradient(circle at 18px 51px, transparent 15px, #FE5151 16px) bottom right;
      background-size: 17px 100px, 116px 100px, 17px 100px;
      background-repeat: no-repeat;
      background-position: 10px 0px,26px 0px,142px 0px;
	}

左边圆的颜色取线性渐变的开始，右边圆的颜色取线性渐变颜色的结束值

3、第三种情况（渐变，圆在上下两边）

把优惠券分为四个部分，左边主体线性渐变，上圆，下圆，右边主体线性渐变，主要代码如下：

<div class="box2"></div>
.box2 {
      width: 160px;
      height: 100px;
      background: linear-gradient(0.25turn, #fe8864, #FE5151), radial-gradient(circle at 11px 4px, transparent 6px, #FE5151 6px) top left, radial-gradient(circle at 10px 56px, transparent 6px, #FE5151 6px) bottom left, linear-gradient(0.25turn, #FE5151, #fe434c);
      background-size: 120px 82px, 20px 50px, 20px 57px, 32px 84px;
      background-repeat: no-repeat;
      background-position: 0px 0px,120px -4px, 120px 26px, 140px 0px;
    }

上圆的下圆的颜色值是取圆所在位置的值，右边主体线性渐变再从圆的颜色值开始到结束的颜色值

转载于：css3实现优惠券效果（向内凹的圆）_css 优惠券内凹_菠萝香的博客-CSDN博客

    <div class="base-coupons">示例</div>

.base-coupons {
  width: 100%;
  height: 100px;
  /*    重点代码    */
  background: radial-gradient(circle at left bottom, transparent 10px, #0ff 0) top left / 50% 70% no-repeat, radial-gradient(circle at left top, transparent 10px, #cf9236 0) bottom left /50% 31% no-repeat, radial-gradient(circle at right bottom, transparent 10px, #ff00ff 0) top right /50% 70% no-repeat, radial-gradient(circle at right top, transparent 10px, #3a8ee6 0) bottom right /50% 31% no-repeat;
  border-radius: 10px;
}

css实现各种优惠券效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			
		.coupon {  width: 240px;  height: 100px;  margin-top: 15px;  background-color: #F56C6C;  -webkit-mask: radial-gradient(circle at left center, transparent 20px, red 20px); }
		.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;}
		.coupon3 {  width: 240px;  height: 100px;  margin-top: 15px;  background-color: #F56C6C;  -webkit-mask: radial-gradient(circle at 20px, #0000 20px, red 0); }
		.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;}
		/* 缩写 */
		.coupon4-1 {  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px; }
		.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%;}
	/* 缩写 */
		.coupon5-1{  -webkit-mask: radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%; }
		.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;}

		.coupon7 {  width: 240px;  height: 100px;  margin-top: 15px;  background-color: #F56C6C;  -webkit-mask: radial-gradient(circle at 50%, red 5px, #0000 0) 50% 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;  -webkit-mask-composite: destination-out;  mask-composite: subtract; /*Firefox*/}
		.coupon8 {  width: 240px;  height: 100px;  margin-top: 15px;  background-color: #F56C6C;  -webkit-mask: radial-gradient( circle at 5px, red 5px, #0000 0) -5px 50% / 100% 20px, radial-gradient(circle at 20px 20px, #0000 20px, red 0) -20px -20px / 50%;  -webkit-mask-composite: destination-out;  mask-composite: subtract; /*Firefox*/}
		</style>

		
		<div class="coupon"></div>

		<div class="coupon2"></div>

		<div class="coupon3"></div>

		<div class="coupon4"></div>

		<div class="coupon4-1"></div>

		<div class="coupon5"></div>
		<div class="coupon5-1"></div>

		<div class="coupon6"></div>
		<div class="coupon7"></div>
		<div class="coupon8"></div>
	</body>
</html>

coldriversnow

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
css3实现优惠券效果（向内凹的圆）

背景色和自身（优惠券）的颜色会改变，实现向内凹的圆效果，效果图如下。如果叫设计师切好几十种背景图是很不现实的，只能用代码来实现，性能会比较好。随着背景色的改变，向内凹圆的背景色也要跟着变，因此，向内凹陷的部分只能设置成透明。实现如下三种情况：1、第一种情况（纯色）自身（优惠券）的颜色是纯色的，这个实现起来比较简单，主要代码如下radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变。
复制链接

扫一扫