网页优惠券CSS3借鉴

body：

    <!--可用-->
    <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);}