一、优惠卷
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #6c00af;
}
div {
min-width: 702px;
min-height: 160px;
border-radius: 12px;
background-image: linear-gradient(to bottom, #FF2655 0%, #FF4F26 100%), linear-gradient(to right, #fff, #fff);
background-size: 210px 100%, cover;
background-repeat: no-repeat;
background-position: right center;
position: relative;
}
div::before {
top: -10px;
}
div::after,::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
background: radial-gradient(circle, #6c00af 50%, transparent 50%),
radial-gradient(circle, #6c00af 50%, transparent 50%);
background-size: 20px 20px;
right: 200px;
}
div::after {
bottom: -10px;
}
</style>
<body>
<div></div>
</body>
</html>