css 优惠券_css优惠券

作者：空白诗007 | 2024-08-09 01:59:29

踩

css优惠券

html 代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>优惠券</title>
    <style>
        .coupon {
            width: 300px;
            height: 150px;
            border-radius: 8px;
            background: linear-gradient(to bottom, #FF9078 7.57%, #FA3440 80.06%);
            -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='48' viewBox='0 0 20 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 48V0c0 2.21 1.809 3.958 3.974 4.395C13.116 6.238 20 14.315 20 24S13.116 41.762 3.974 43.605C1.81 44.042 0 45.791 0 48z' fill='%23000'/%3E%3C/svg%3E") 0 50%/20px no-repeat,
            url("data:image/svg+xml,%3Csvg width='20' height='48' viewBox='0 0 20 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20 48V0c0 2.209-1.809 3.959-3.975 4.395C6.885 6.238 0 14.315 0 24s6.885 17.762 16.025 19.605C18.191 44.041 20 45.791 20 48z' fill='%23000'/%3E%3C/svg%3E") 100% 50%/20px no-repeat,
            linear-gradient(red 0 0);
            -webkit-mask-composite: xor;
        }
 
 
        .coupon {
            padding: 32px;
            color: white;
        }
        .coupon span{
            font-size: 80px;
            font-weight: bolder;
            color: white;
        }
    </style>
</head>
<body>
 
<div class="coupon">
    <div style="text-align: center;border-bottom: 1px dashed white">
        <span>80 元</span>
    </div>
    <div style="text-align: center;padding: 16px">立即领取</div>
</div>
</body>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/950910