优惠券css

优惠券豁口样式

上面的优惠券豁口部分是由4个div拼出来的

代码如下：

<div class="footer-noUse" id="use_'+btn+'">
    <div class="couponType">
        <div class="commisionNum">
            <div class="couponTypeText"></div>
        </div>
    </div>
    <div class="z-coupon-txt">
        <div class="coupon-txt">
            <div class="txt-border">

            </div>
            <div class="txt-timeone"></div>
        </div>
        <div class="b-coupon-txt"></div>
    </div>
    <div class="interval2"></div>

    <div class="z-couponStatus">
        <div class="t-couponStatus"></div>
        <div class="couponStatus">立即使用</div>
        <div class="b-couponStatus"></div>
    </div>
</div>

<style>
    body {
        -webkit-font-smoothing: antialiased;
        -webkit-text-size-adjust: none;
        background-color: #f5f5f5;

    }
    .footer-noUse {
        margin: 15px;
        border-radius: 10px;
        height: 104px;
        display: flex;
    }

    .couponType {
        display: inline-block;
        width: 27%;
        text-align: center;
        border-radius: 10px 0 0 10px;
        background: #ffffff;
    }

    .interval2 {
        width: 0px;
        height: 90px;
        border-left: 1px dashed #CCCCCC;
        margin-top: 7px;
        margin-bottom: 7px;
    }

    .commisionNum {
        font-family: PingFangSC-Medium;
        font-size: 36px;
        color: #F4514E;
        line-height: 36px;
        margin-top: 21px;
        margin-bottom: 2px;
        border-right: 1px solid #CCCCCC;
        height: 62px;
    }

    .couponTypeText {
        font-size: 12px;
        color: #FF5B59;
        line-height: 16px;
        margin-bottom: 21px;
        background: #FFFFFF;
    }

    .couponStatus {
        display: flex;
        width: 13%;
        writing-mode: vertical-lr;
        font-size: 14px;
        color: #F4514E;
        text-align: center;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        top: 22px;
        left: 17px;
    }

    .z-couponStatus {
        position: relative;
        width: 45px;
    }

    .t-couponStatus {
        border-radius: 0 10px 0 0;
        background: radial-gradient(13px at left top, transparent 50%, #fff 50%);
        height: 54px;
    }

    .b-couponStatus {
        height: 50px;
        background: radial-gradient(13px at left bottom, transparent 50%, #fff 50%);
        border-radius: 0 0 10px 0;
    }

    .z-coupon-txt {
        position: relative;
        width: 60%;
        border-radius: 0 10px 10px 0;
    }

    .coupon-txt {
        height: 64px;
        padding-left: 17.5px;
        padding-right: 16.5px;
        background: radial-gradient(13px at right top, transparent 50%, #fff 50%);
    }

    .txt-timeone {
        font-size: 12px;
        color: #999999;
        letter-spacing: 0;
        padding-top: 7px;
        padding-bottom: 22.5px;
    }

    .b-coupon-txt {
        height: 40px;
        background: radial-gradient(13px at right bottom, transparent 50%, #fff 50%);
    }

    .txt-border {
        font-family: PingFang-SC-Regular;
        padding-top: 17px;
    }

</style>

详细说明后续补充