上一波图看看效果

优惠券效果图

主要代码如下：

HTML

<ul id="couponList">
    <li>
        <div class="limitBox">
            <span>￥</span>
            <span>30</span>
        </div>
        <div class="rangeBox">
            <span class="timeRange">2019.9-2020.9</span><br>
            <span class="useLimit">满499可用</span><br>
            <span class="useRange">全场通用</span><br>
        </div>
        <div class="receiveNow">
            <span>立即领取</span>
        </div>
    </li>
    <li>
        <div class="limitBox">
            <span>￥</span>
            <span>100</span>
        </div>
        <div class="rangeBox">
            <span class="timeRange">2019.9-2020.9</span><br>
            <span class="useLimit">满499可用</span><br>
            <span class="useRange">全场通用</span><br>
        </div>
        <div class="receiveNow">
            <span>立即领取</span>
        </div>
    </li>
</ul>

CSS

           /*
                * 优惠券样式
            */
            #couponList{
                margin: 0 auto;
                padding: 0;
                position: relative;
                width: 95%;
                top: 10%;
            }
            #couponList li{
                list-style: none;
                width: 90%;
                margin: 0 auto 1rem;
                height: 7rem;
                border-radius: 5px;
                /* border-bottom: 1px solid #e6e6e6; */
                /* line-height: 3rem; */
                padding: 0 3%;
                 color: #f6ffd9;
                background: linear-gradient(90deg, #f66021, #ffbf2f);
                position: relative;
                box-shadow: 5px 5px 10px #989595;
            }
            .limitBox{
                float: left;
                width: 58%;
                font-family: fantasy;
                text-align: right;
                /* text-indent: 16px; */
                margin-right: 2%;
            }
            .limitBox span:nth-child(1){
                /*margin-left: 35%;*/
                margin-top: 38%;
                display: inline-block;
                font-size: 1.5rem;
            }
            .limitBox span:nth-child(2){
                font-size: 4.2rem;
            }
    
            .rangeBox{
                width: 40%;
                font-size: 0.69rem;
                margin-top: 10%;
                float: left;
            }
            .useRange{
                width: 4.8rem;
                height: 1.3rem;
                background: #fff;
                font-size: .9rem;
                display: inline-block;
                color: #ffb02e;
                border-radius: 2px;
                text-align: center;
                line-height: 1.2rem;
                letter-spacing: 1px;
                margin-top: 2px;
            }
            .useLimit{
                font-size: .9rem;
                letter-spacing: 2px;
            }  
            .receiveNow {
                position: absolute;
                background: linear-gradient(-30deg, transparent 80px,#b9600d 0);
                height: 4.5rem;
                width: 7rem;
                /* transform: rotate(16deg); */
                left: -0.4%;
                top: -1.2px;
                border-radius: 5px;
            }
            .receiveNow span {
                position: absolute;
                transform: rotate(-30deg);
                font-size: .75rem;
                top: .9rem;
                left: 0.4rem;
            }
            /*.receiveNow span{*/
                /*position: absolute;*/
                /*transform: rotate(45deg);*/
            /*}*/
            /*
                * 优惠券样式结束
            */

爱心发射biu.gif