优惠券图案

   <div class="myWorkCard">
                <div class="card">
                    <div class="coupon up" style="position: relative; padding: 0 10px;">
                        <div>
                            <h4>全场5</h4>
                            <p>仅在指定活动页面使用,最终解释权归我们</p>
                        </div>
                        <div class="line"></div>
                    </div>
                    <div class="coupon down" style="position: relative;padding: 10px;">
                        <p>有效期:2021/10/1 ~ 2021/10/7</p>
                    </div>
                </div>
            </div>
.myWorkCard {
    width: 100%;
    height: 100vh;
    background: linear-gradient(134deg, #0A9BF7 0%, #0469ED 100%);
    padding: 4.5rem 1.75rem 0 1.75rem;
    z-index: -99;
    box-sizing: border-box;
    position: absolute;
}

p {
    margin: 0;
    padding: 0;
}

.card {
    width: 100%;
    /* z-index: 5; */
}

.coupon:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
}

.coupon:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    z-index: -1;
}

.coupon.up::after {
    background: radial-gradient(1rem at right bottom,
            transparent 50%,
            #fff 50%);
    border-radius: 0 4px 0 0;
}

.coupon.up::before {
    background: radial-gradient(1rem at left bottom, transparent 50%, #fff 50%);
    border-radius: 4px 0 0 0;
}

.coupon.down::before {
    background: radial-gradient(1rem at left top, transparent 50%, #fff 50%);
    border-radius: 0 0 0 4px;
}

.coupon.down:after {
    background: radial-gradient(1rem at right top, transparent 50%, #fff 50%);
    border-radius: 0 0 4px 0;
}

.line {
    /* margin-left: 23px; */
    width: calc(100% - 30px);
    height: 3px;
    background-image: linear-gradient(to right,
            #ccc 0%,
            #ccc 50%,
            transparent 50%);
    background-size: 19px 3px;
    background-repeat: repeat-x;
    position: absolute;
    box-sizing: border-box;
    bottom: -0.0625rem;
    left: 15px;

}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值