关于用 CSS 实现优惠券样式,内凹圆角及虚线处颜色透明

10 篇文章 0 订阅

在这里插入图片描述
在这里插入图片描述
关于一些边线波浪线的使用,可以参考这篇文章。

<div class="coupon">
	<div class="left">
		<div class="left-wave"></div>
		优惠券
	</div>
	<div class="mid">
		<div class="top-radius"></div>
		<div class="mid-left"></div>
		<div class="mid-line"></div>
		<div class="mid-right"></div>
		<div class="btm-radius"></div>
	</div>
	<div class="right">
		<div class="money">88<span class="unit"></span></div>
		<div class="condition">全店满299使用</div>
		<div class="right-wave"></div>
	</div>
</div>
body {
	background: linear-gradient(#0ff, #ccc);
}
.coupon {
	box-sizing: border-box;
	display: flex;
	width: 440px;
	height: 200px;
	margin: 40px auto;
	padding: 0 20px;
	overflow: hidden;
}
.coupon .left {
	position: relative;
	width: 70px;
	height: 100%;
	writing-mode: vertical-lr;
	text-align: center;
	line-height: 85px;
	letter-spacing: 5px;
	color: #fff;
	font-size: 30px;
	font-weight: 300;
	background-color: #f00;
}
.left .left-wave {
	position: absolute;
	left: -7px;
	top: 0;
	width: 20px;
	height: 100%;
	background: radial-gradient(circle, #f00 10px, #f00, transparent 10px, transparent);
	background-repeat: repeat-y;
	background-size: 20px 25px;
	background-position: 0 0;
}
.coupon .right {
	position: relative;
	width: 220px;
	height: 100%;
	padding: 15px 0 0 60px;
	color: #fff;
	font-weight: 300;
	background-color: #f00;
}
.right .money {
	font-size: 90px;
	font-weight: 400;
}
.right .unit {
	font-size: 40px;
}
.right .condition {
	font-size: 26px;
}
.right .right-wave {
	position: absolute;
	right: -7px;
	top: 0;
	width: 20px;
	height: 100%;
	background: radial-gradient(circle, #f00 10px, #f00, transparent 10px, transparent);
	background-repeat: repeat-y;
	background-size: 20px 25px;
	background-position: 100% 0;
}
.coupon .mid {
	position: relative;
	top: 0;
	width: 40px;
	height: 100%;
}
.top-radius {
	box-sizing: border-box;
	position: absolute;
	top: -20px;
	left: 0;
	width: 40px;
	height: 40px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border: 10px solid #f00;
}
.btm-radius {
	box-sizing: border-box;
	position: absolute;
	bottom: -20px;
	left: 0;
	width: 40px;
	height: 40px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	border: 10px solid #f00;
}
.mid-left {
	position: absolute;
	left: 0;
	top: 0;
	width: 10px;
	height: 100%;
	background-color: #f00;
	z-index: 10;
}
.mid-right {
	position: absolute;
	right: 0;
	top: 0;
	width: 10px;
	height: 100%;
	background-color: #f00;
	z-index: 10;
}
.mid-line {
	position: absolute;
	left: 0;
	top: 15px;
	width: 40px;
	height: 170px;
	background-color: #fff;
	z-index: 8;
	background: radial-gradient(circle, transparent 3px, transparent, #f00 3px, #f00);
	background-size: 40px 17px;
	background-repeat: repeat-y;
}
  • 3
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值