<div class="card"></div>
.card {
--card-color: #fff;
--pillar-size: 34px;
--big-circle-r: 30px;
--circle-r: 13px;
--circle-d: calc(var(--circle-r) * 2);
--circles-space: calc(var(--big-circle-r) + var(--pillar-size));
--circle-extend-inset: calc(var(--circle-r) + var(--circles-space));
background:
/* Big Circle Cutout */ radial-gradient(
circle at 100% 0%,
transparent var(--big-circle-r),
var(--card-color) calc(var(--big-circle-r) + 1px)
)
0px var(--pillar-size) / calc(100% - var(--pillar-size)) 100% no-repeat
no-repeat,
/* Top Circle */
radial-gradient(
circle closest-side,
var(--card-color) 100%,
transparent calc(100% + 1px)
)
calc(100% - var(--circles-space)) 0 / var(--circle-d) var(--circle-d)
no-repeat no-repeat,
/* Right Circle */
radial-gradient(
circle closest-side,
var(--card-color) 100%,
transparent calc(100% + 1px)
)
100% var(--circles-space) / var(--circle-d) var(--circle-d) no-repeat
no-repeat,
/* Top Circle Extend */
linear-gradient(0deg, var(--card-color) 100%, var(--card-color) 100%) 0px
var(--circle-r) / calc(100% - var(--circles-space))
calc(100% - var(--circle-r)) no-repeat no-repeat,
/* Right Gap fill Pillar */
linear-gradient(0deg, var(--card-color) 100%, var(--card-color) 100%) 0px
0px / calc(100% - var(--circle-extend-inset)) var(--circle-d) no-repeat
no-repeat,
/* Right Circle Extend */
linear-gradient(0deg, var(--card-color) 100%, var(--card-color) 100%) 100%
var(--circle-extend-inset) / var(--circle-d) 100% no-repeat no-repeat,
/* Right Gap fill Pillar */
linear-gradient(0deg, var(--card-color) 100%, var(--card-color) 100%) 0
var(--circles-space) / calc(100% - var(--circle-r)) 100% no-repeat
no-repeat;
width: 217px;
min-height: 400px;
}
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.