css 优惠券

html 代码


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>

相关阅读:
（四）模型训练保存与加载
【面向对象】【数组去重】【反转字符串】
x86体系结构（WinDbg学习笔记）
【PyTorch】深度学习实践之多维度输入Multiple Dimension Input
写给Python社群的第2课：Python逻辑语句，天天要写的 if 和 while
spring 有哪些主要模块？
Vuex 学习
索引（index）
Go内存分配
C++ STL(九) -------- 哈希表封装unordered_map和unordered_set

原文地址：https://blog.csdn.net/qq_35350009/article/details/133377720