css3实现锯齿边框（用于优惠券或邮票等）

css3实现锯齿边框（用于优惠券或邮票等）

html:

<div class="box">
	<div class="count">
		<h3>&yen;100</h3>
		<p class="p1">满599使用</p>
		<p>有效期2019.08.13-2019.10.16</p>
	</div>
	<div class="get">立即领取</div>
</div>

预览标签如下所示：

css:

<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.box{
		width: 350px;
		height: 90px;
		display: flex;
		position: absolute;
		top: 100px;
		left: 100px;
		
		color: #fff;
		font-size: 12px;
		padding-left: 5px;
		box-sizing: border-box;
		background-color: #fff;
		background-image: radial-gradient(transparent 0, transparent 4px,#ffb937 4px);
		background-size: 15px 14px;
		background-position: 9px 0px;
	}
	.count{
		padding: 10px;
		flex: 1;
		box-sizing: border-box;
		border-right: 1px dashed #f5f5f5;
		background-color: #ffb937;
	}
	.count h3{
		font-size: 23px;
	}
	.get{
		width: 102px;
		height: 90px;
		line-height: 90px;
		text-align: center;
		background-color: #ffb937;
		box-sizing: border-box;
		margin-right: 5px;
	}
</style>