<style type="text/css" >
.couponMain{width: 1670px;height: 2000px;background: #FE4227;}
.couponContent{width: 700px; margin:0 auto;height:auto;}
.lottery{width: 100%;min-height: 170px;background: #D93821;border-radius: 10px;color: #555; padding: 20px 0;}
.lottery_num{width: 85%;margin:5px auto;height: 130px;background: #FFF;border-radius: 4px;}
.lottery_structure{position: relative;}
.lottery_structure::after{display: block;content:'';clear:both;}
.lottery_structure_price{font-size: 14px;border-right: 2px #888 dashed;}
.lottery_structure_price,.lottery_structure_info{text-align: center;width: 30%;float: left;height: 130px;display:table;}
.lottery_structure_info{width: 67.5%;text-align:left; }
.lottery_structure_info ul {font-size:14px;}
.lottery_structure_info ul li{font-size:14px;}
.lottery_structure_info ul li span{font-size:25px;height: 18px;display: inline-block;overflow: hidden;padding-right: 8px; }
.lottery_structure_info p strong{font-size:17px;}
.price_em{color: #FF2002;}
.price_em_yenIcon{font-size: 25px;}
.price_em_price{font-size: 40px;color:;}
.lottery_structure_cell{padding: 10px 0}
.lottery_structure_price_middle{display:table-cell; vertical-align:middle;}
.lottery_structure_info .lottery_structure_price_middle{line-height: 25px;padding-left:7%}
.radius_top{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:-2px;left: -370px;}
.radius_top:before, .radius_top:after { content: ' ';width: 0;height: 100%;position: absolute;top: -7px;}
.radius_top:after {border-right: 20px dotted #D93821; right: 1px;}
.radius_bottom{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:90px;left: -370px;}
.radius_bottom:before, .radius_bottom:after { content: ' ';width: 0;height: 100%;position: absolute;top: 3px;}
.radius_bottom:after {border-right: 20px dotted #D93821; right: 1px;}
.radius_top1{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:-2px;left: -370px;}
.radius_top1:before, .radius_top1:after { content: ' ';width: 0;height: 100%;position: absolute;top: -7px;}
.radius_top1:after {border: 21px dotted #D93821; right: 1px;}
.radius_bottom1{position: relative;overflow: hidden;width: 22px;height: 20px;background: transparent;display: inline-block;top:90px;left: -370px;}
.radius_bottom1:before, .radius_bottom1:after { content: ' ';width: 0;height: 100%;position: absolute;top: 3px;}
.radius_bottom1:after {border: 21px dotted #D93821; right: 1px;}
.sawtooth {
/* 相对定位,方便让before和after伪元素绝对定位偏移 */
position: relative;
/* 把超出div的部分隐藏起来 */
overflow: hidden;
height: 130px;
width: 1.3%;
float: left;
background: #FCBF00;
border-radius: 4px 0px 0 4px;
}
.sawtooth:before, .sawtooth:after {
content: ' ';
width: 0;
height: 100%;
/* 绝对定位进行偏移 */
position: absolute;
top: 5px;
}
/*.sawtooth:before {
border-right: 10px dotted white;
left: -5px;
}*/
.sawtooth:after {
/* 圆点型的border */
border-left: 5px dotted white;
/* 偏移一个半径,让圆点的一半覆盖div */
right: -2px;
}
.couponContent .overflow {
width: 322px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
vertical-align: bottom;
}
.radius_border{width: 22px;}
</style>
<div class="couponMain">
<img src="<?php echo SHOP_TEMPLATES_URL;?>/images/coupon/PC/huodong.png" alt="" >
<div class="couponContent">
<div class="lottery">
<div class="lottery_structure_cell">
<div class="lottery_num">
<div class="lottery_structure">
<div class="sawtooth"></div>
<div class="lottery_structure_price">
<div class="lottery_structure_price_middle">
<p class="price_em"><span class="price_em_yenIcon">¥</span><span class="price_em_price">50</span></p>
<p>满100可用</p>
</div>
</div>
<div class="lottery_structure_info">
<div class="lottery_structure_price_middle">
<p><strong>通用优惠券</strong></p>
<ul>
<li><font class="overflow" ><span>·</span>满100可用</font></li>
<li><span>·</span>优惠券数量:100张</li>
<li><span>·</span>2018-11-11至2018-11-12</li>
</ul>
</div>
<div class="radius_border">
<span class="radius_top"></span>
<span class="radius_bottom"></span>
</div>
</div>
</div>
</div>
</div>
<div class="lottery_structure_cell">
<div class="lottery_num">
<div class="lottery_structure">
<div class="sawtooth"></div>
<div class="lottery_structure_price">
<div class="lottery_structure_price_middle">
<p class="price_em"><span class="price_em_yenIcon">¥</span><span class="price_em_price">50</span></p>
<p>满100可用</p>
</div>
</div>
<div class="lottery_structure_info">
<div class="lottery_structure_price_middle">
<p><strong>通用优惠券</strong></p>
<ul>
<li><font ><span>·</span>满100可用</font></li>
<li><span>·</span>优惠券数量:100张</li>
<li><span>·</span>2018-11-11至2018-11-12</li>
</ul>
</div>
<div class="radius_border">
<span class="radius_top"></span>
<span class="radius_bottom"></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" >
$(function(){
var browser=navigator.appName
var b_version=navigator.appVersion
var version=b_version.split(";");
var trim_Version=version[1].replace(/[ ]/g,"");
if(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE8.0")
{
$(".radius_top").addClass("radius_top1").removeClass('radius_top');
$(".radius_bottom").addClass("radius_bottom1").removeClass('radius_bottom');
}
})
</script>
<script type="text/javascript">
</script>