效果图
demo下载 URL
HTML
<!--可用--> <div class="coupon"> <div class="coupon-left"> <div class="coupon-inner"> <div class="coupon-money"> <span>¥</span> <span class="sum">100.00</span> </div> <div class="coupon-condition"> <p>满200.00可用</p> </div> </div> </div> <div class="coupon-right"> <div class="coupon-inner"> <div class="coupon-time"> 截止日期<br> 2216-12-31 </div> <i class="coupon-circle top"></i> <i class="coupon-circle bottom"></i> </div> </div> <div class="coupon-light"></div> </div> <!--不可用--> <div class="coupon coupon-diabled"> <div class="coupon-left"> <div class="coupon-inner"> <div class="coupon-money"> <span>¥</span> <span class="sum">100.00</span> </div> <div class="coupon-condition"> <p>满200.00可用</p> </div> </div> </div> <div class="coupon-right"> <div class="coupon-inner"> <div class="coupon-time"> 截止日期<br> 2016-12-31 </div> <i class="coupon-circle top"></i> <i class="coupon-circle bottom"></i> </div> </div> <div class="coupon-light"></div> </div> CSS .coupon{position:relative;background:#d51d27;color:#fff;width:100%;height:95px;line-height:25px;overflow:hidden;margin-top:15px;} .coupon-diabled{background:#c3c3c3;color:#666;} .coupon:after{content:".";display:block;height:0;clear:both;visibility:hidden;} .coupon-money .sum{font-size:25px;} .coupon-left{float:left;text-align:left;width:60%;font-size:12px;background:url(./circle-border-left.png) left center no-repeat;} .coupon-right{float:right;text-align: center;width:40%;font-size:14px;background:url(./circle-border-right.png) right center no-repeat;} .coupon-inner{padding:10px 15px;height:75px;position: relative;} .coupon-right .coupon-inner{border-left:2px dashed rgba(255,255,255,.5);} .coupon-money,.coupon-time{margin-top:12px;} .coupon-circle{display:inline-block;width:16px;height:16px;background:#fff;position: absolute;left:-9px;border-radius:50%} .coupon-circle.top{top:-8px;} .coupon-circle.bottom{bottom:-8px;} .coupon-light{position:absolute;top:20px;left:20%;height:150px;width:100%;background:rgba(255,255,255,.2);transform: rotate(-30deg);-webkit-transform: rotate(-30deg);-moz-transform: rotate(-30deg);}