I have a problem when creating a card with a semicircle on each side of its left and right, this semicircle I want to limit to appear only 4, but with background-repeat, it appears infinitely. Can I reduce those half circles?
Reality:
.card-coupon {
height: 120px;
border-radius: 6px;
/* border: 1px solid #f5f5f5; */
width: 100%;
max-width: 300px;
padding: 12px 18px;
background: radial-gradient(8px at left, #0000 98%, #fff) left,
radial-gradient(8px at right, #0000 98%, #fff) right;
background-size: 50.5% 29.2px;
background-position: top 28.35px left, top 28.35px right;
background-repeat: repeat-y;
filter: drop-shadow(0px 2px 5px rgba(0, 0, 0, 0.12));
}
body {
background: gray;
}
<div class="card-coupon"></div>
So, I want the results to be the same as expected. Thank you 🙂
You need to sign in to view this answers
Leave feedback about this