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

<div class="sawtooth-bor">

<div class="pt10 bor_r_dashed clearfix pr10 pb8 flex-item pl10 bg-cffb937">

<h3 class="fs36">&yen;50</h3>

<div class="fs12 lh18">满498使用</div>

<div class="fs12 lh18">有效期2018.03.16-2018.05.31</div>

</div>

<div class="textc flex-align-self w102 bg-cffb937 lhh90 mr5">立即领取</div>

</div>

 

 

css

 

.sawtooth-bor{

display: flex;

padding-left: 5px;

color: #fff;

box-sizing: border-box;

background: radial-gradient(transparent 0, transparent 4px, #ffb937 4px);

background-size: 15px 14px;

background-position: 8px 0px;

background-color: #fff;

}

.discount{

border-right: 1px dashed #f5f5f5;

padding: 10px;

flex: 1;

box-sizing: border-box;

background-color: #ffb937;

}

.receive{

text-align: center;

width: 102px;

line-height: 90px;

height: 90px;

box-sizing: border-box;

margin-right: 5px;

background-color: #ffb937;

}

 

效果：