HTML5+CSS：03优惠券

墨蓝 2023-05-29 06:47 9阅读 0赞

优惠券样式：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70][]

代码马上送上：

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf8">  
    <style>  
    body \{  
        display: flex;  
        flex-wrap: wrap;  
    \}  
    .coupon \{  
        display: inline-flex;  
        color: white;  
        position: relative;  
        padding-left: .5rem;  
        padding-right: .5rem;  
        margin: 1rem;  
        /\*\* 弧度得用rem来计数，不能用%号，因为%是用来计数高度和宽度的 \*/  
        border-top-right-radius: .3rem;  
        border-bottom-right-radius: .3rem;  
        overflow: hidden;  
    \}  
    .coupon-yellow \{  
        background-color: \#F39B00;  
    \}  
    .coupon-yellow-gradient \{  
        background-image: linear-gradient(150deg, \#F39B00 50%, \#F39B00D8 50%);  
    \}  
    .coupon-red-gradient \{  
        background-image: linear-gradient(150deg, \#D24161 50%, \#D24161D8 50%);  
    \}  
    .coupon-green-gradient \{  
        background-image: linear-gradient(150deg, \#7EAB1E 50%, \#7EAB1ED8 50%);  
    \}  
    .coupon-blue-gradient \{  
        background-image: linear-gradient(150deg, \#50ADD3 50%, \#50ADD3D8 50%);  
    \}  
    /\*\* 左边框波浪 \*\*/  
    .coupon-wave-left::before, .coupon-wave-right::after\{  
        content: '';  
        position: absolute;  
        top: 0;  
        height: 100%;  
        width: 14px;  
        background-image: radial-gradient(white 0, white 4px, transparent 4px);  
        /\*\* 若只设置为r（半径）的两倍(直径)，则半圆之间没有类似堤岸的间隔 \*/  
        background-size: 14px 14px;  
        background-position: 0 2px;  
        background-repeat: repeat-y;  
        z-index: 1;  
    \}  
    .coupon-wave-left::before \{  
        left: -7px;  
    \}  
    .coupon-wave-right::after \{  
        right: -7px;  
    \}  
    .coupon-info \{  
        padding-left: 1rem;  
        padding-right: 1rem;  
        padding-top: 1rem;  
        padding-bottom: 1.5rem;  
        position: relative;  
        min-width: 15rem;  
    \}  
    .coupon-info-right-dashed \{  
        border-right: 2px dashed white;  
    \}  
    .coupon-info-right-solid \{  
        border-right: 2px solid white;  
    \}  
    /\*\* 使用两个边框为圆角的白色div制造半圆缺角，有个缺点是这个缺角必须与背景色相同（clip-path不好使用） \*\*/  
    .coupon-hole::before, .coupon-hole::after \{  
        content: '';  
        width: 1rem;  
        height: 1rem;  
        background-color: white;  
        border-radius: 50%;  
        position: absolute;  
        right: -.5rem;  
    \}  
    .coupon-info::before \{  
        top: -.5rem;  
    \}  
    .coupon-info::after \{  
        bottom: -.5rem;  
    \}  
    .coupon-info>div \{  
        margin-bottom: .2rem;  
    \}  
    .coupon-price \{  
        font-size: 250%;  
        font-weight: bold;  
    \}  
    .coupon-price>span \{  
        font-size: 40%;  
        margin-left: .5rem;  
        font-weight: normal;  
    \}  
    .coupon-get \{  
        padding: 1rem;  
        /\*\* 这里使用flex是为了让文字居中 \*/  
        display: flex;  
        justify-content: center;  
        align-items: center;  
        flex-direction: column;  
        min-width: 5rem;  
        position: relative;  
    \}  
    .coupon-get>.coupon-desc \{  
        font-size: 150%;  
        margin-bottom: .5rem;  
        font-weight: bold;  
    \}  
    .coupon-get-already::after \{  
        content: '';  
        width: 5rem;  
        height: 5rem;  
        background-size: 5rem 5rem;  
        background-image: url('data:image/png;base64,iVBORw0I=');  
        position: absolute;  
        top: -1rem;  
        right: -1rem;  
    \}  
    </style>  
    </head>  
    <body>  
    <div class="coupon coupon-wave-left coupon-yellow">  
        <div class="coupon-info coupon-hole coupon-info-right-dashed">  
            <div class="coupon-price">&yen;5.00</div>  
            <div class="coupon-desc">5元优惠券满50.00元使用</div>  
            <div class="coupon-expiry-date">有效期：2019.10.01-2019.10.30</div>  
        </div>  
        <div class="coupon-get coupon-get-already">立即领取</div>  
    </div>  
      
    <div class="coupon coupon-yellow">  
        <div class="coupon-info coupon-wave-right">  
            <div class="coupon-price">&yen;5.00</div>  
            <div class="coupon-desc">5元优惠券满50.00元使用</div>  
            <div class="coupon-expiry-date">有效期：2019.10.01-2019.10.30</div>  
        </div>  
        <div class="coupon-get">立即领取</div>  
    </div>  
      
    <div class="coupon coupon-wave-left coupon-wave-right coupon-yellow-gradient">  
        <div class="coupon-info coupon-info-right-dashed">  
            <div class="coupon-store">XXXXXX旗舰店</div>  
            <div class="coupon-price">&yen;5.00<span>优惠券</span></div>  
            <div class="coupon-description">订单满50.00元</div>  
        </div>  
        <div class="coupon-get">  
            <div class="coupon-desc">副券</div>  
            <div class="coupon-expiry-date">2019.10.01<br/>2019.10.30</div>  
        </div>  
    </div>  
      
    <div class="coupon coupon-wave-left coupon-wave-right coupon-red-gradient">  
        <div class="coupon-info coupon-info-right-dashed">  
            <div class="coupon-store">XXXXXX旗舰店</div>  
            <div class="coupon-price">&yen;10.00<span>优惠券</span></div>  
            <div class="coupon-description">订单满100.00元</div>  
        </div>  
        <div class="coupon-get">  
            <div class="coupon-desc">副券</div>  
            <div class="coupon-expiry-date">2019.10.01<br/>2019.10.30</div>  
        </div>  
    </div>  
      
    <div class="coupon coupon-wave-left coupon-wave-right coupon-green-gradient">  
        <div class="coupon-info coupon-info-right-dashed">  
            <div class="coupon-store">XXXXXX旗舰店</div>  
            <div class="coupon-price">&yen;20.00<span>优惠券</span></div>  
            <div class="coupon-description">订单满200.00元</div>  
        </div>  
        <div class="coupon-get">  
            <div class="coupon-desc">副券</div>  
            <div class="coupon-expiry-date">2019.10.01<br/>2019.10.30</div>  
        </div>  
    </div>  
      
    <div class="coupon coupon-wave-left coupon-wave-right coupon-blue-gradient">  
        <div class="coupon-info coupon-info-right-dashed">  
            <div class="coupon-store">XXXXXX旗舰店</div>  
            <div class="coupon-price">&yen;50.00<span>优惠券</span></div>  
            <div class="coupon-description">订单满300.00元</div>  
        </div>  
        <div class="coupon-get">  
            <div class="coupon-desc">副券</div>  
            <div class="coupon-expiry-date">2019.10.01<br/>2019.10.30</div>  
        </div>  
    </div>  
    </body>  
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019110511470665.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAxNTY2OQ==,size_16,color_FFFFFF,t_70