優惠券樣式：
代碼馬上送上：
<!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;
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);
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;
}
.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;
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">¥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">¥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">¥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">¥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">¥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">¥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>
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)