<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;
}
优惠券图案
于 2022-04-19 23:53:02 首次发布