H5 CSS3网页优惠券

• 效果图
  

• 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);}