css渐变+伪元素实现卡券样式

1.实现效果

2.实现原理

渐变
用到的是：
radial-gradient
linear-gradient

3.具体实现

demo1：

.circle01 {
	width: 300px;
	height: 100px;
	position: relative;
	background-color:#ff6810 ;
	background:radial-gradient(circle at 150px 100px, transparent 10px, #ff6810 0) top left/300px 100% no-repeat;
	border-radius: 10px;
}

或者用-webkit-mask

.circle01 {
	width: 300px;
	height: 100px;
	position: relative;
	background-color:#ff6810 ;
	/* background:radial-gradient(circle at 150px 100px, transparent 10px, #ff6810 0) top left/300px 100% no-repeat; */
	-webkit-mask: radial-gradient(circle at 150px 100px, transparent 10px, #ff6810 0) top left/300px 100% no-repeat;
	border-radius: 10px;
	}
			

demo2

.circle01_top{
	width: 300px;
	height: 100px;
	position: relative;
	border-radius: 10px;
	background: radial-gradient(circle at 150px 0, transparent 10px, #ff6810 0) top left/300px 100% no-repeat;
}

demo3

.circle01_left{
	width: 300px;
	height: 100px;
	position: relative;
	border-radius: 10px;
	background: radial-gradient(circle at 0 50px, transparent 10px, #ff6810 0) top left;
}

demo4

.circle01_right{
	width: 300px;
	height: 100px;
	position: relative;
	border-radius: 10px;
	background: radial-gradient(circle at 300px 50px, transparent 10px, #ff6810 0) top left;
}

demo5

.circle01_d1 {
	width: 300px;
	height: 100px;
	position: relative;
	border-radius: 10px;
	background: radial-gradient(circle at 10px, transparent 10px, #ff6810 0) -10px;
}

demo6

.circle01_d3 {
	width: 300px;
	height: 100px;
	position: relative;
	border-radius: 10px;
	background: radial-gradient(circle at 10px, transparent 5px, #ff6810 0)  top left/300px 20px;
}

4.写在最后🍒

看完本文如果觉得对你有一丢丢帮助，记得点赞+关注+收藏鸭 🍕

更多相关内容，关注🍥苏苏的bug，🍡苏苏的github，🍪苏苏的码云~