<div class="card product"></div>
<div class="card compare"></div>
<div class="card dropdown"></div>
.product {
--circle-r: 13px /*input*/;
--big-circle-r: 30px /*input*/;
--pillar-size: max(34px /*input*/, var(--circle-r));
--card-color: #fff /*input*/;
--card-shadow: 0 10px 48px rgba(21, 44, 115, 0.15) /*input*/;
width: 217px;
min-height: 400px;
border-radius: 50px;
}
.compare {
--circle-r: 10px /*input*/;
--big-circle-r: 25px /*input*/;
--pillar-size: max(24px /*input*/, var(--circle-r));
--card-color: #fff /*input*/;
--card-shadow: 0 10px 48px rgba(21, 44, 115, 0.15) /*input*/;
width: 300px;
min-height: 140px;
border-radius: 40px;
}
.dropdown {
--circle-r: 20px /*input*/;
--big-circle-r: 22px /*input*/;
--pillar-size: max(23px /*input*/, var(--circle-r));
--card-color: #fff /*input*/;
--card-shadow: 0 10px 48px rgba(21, 44, 115, 0.15) /*input*/;
width: 200px;
min-height: 240px;
border-radius: 25px;
}
.card {
--circle-offset: calc(var(--big-circle-r) + var(--pillar-size) + var(--circle-r));
--filler: conic-gradient(at right var(--circle-r) top var(--circle-r),#0000 25%,var(--card-color) 0);
position: relative;
border-top-right-radius: 0;
filter: drop-shadow(var(--card-shadow));
background:
/* Big Circle Cutout */
radial-gradient(var(--big-circle-r) at 100% 0%,#0000 98%,var(--card-color))
calc(-1*var(--pillar-size)) var(--pillar-size),
/* Top Circle */
radial-gradient(var(--circle-r) at top var(--circle-r) right var(--circle-offset),
var(--card-color) 98%,#0000),
/* Right Circle */
radial-gradient(var(--circle-r) at right var(--circle-r) top var(--circle-offset),
var(--card-color) 98%,#0000),
/* Fillers */
var(--filler) calc(-1*(var(--big-circle-r) + var(--pillar-size))) 0,
var(--filler) 0 calc(var(--big-circle-r) + var(--pillar-size));
background-repeat: no-repeat;
}
body {
background: pink;
display: flex;
gap: 20px;
justify-content: space-evenly;
align-items: center;
overflow-x: auto;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.