<div class="canvas">
<div class="watermelon">
<div class="seed">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
body {
margin: 0;
padding: 5%;
background-color: #ffffff;
}
/* 描画エリア */
.canvas {
width: min(100%,300px);
margin: 0 auto;
}
/* スイカ */
.watermelon {
position: relative;
aspect-ratio: 1 / 1;
clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
/* スイカ(色) */
.watermelon::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(#f22435 0%, #f22435 55%, #ffffff 55%, #ffffff 61%, #8fef9e 61%, #8fef9e 67%, #1c7239 67%);
padding-bottom: 13%;
bottom: 0;
}
/* スイカ(種) */
.seed {
position: absolute;
display: grid;
row-gap: min(35px, 12vw);
column-gap: min(7px, 4vw);
justify-content: center;
width: calc(100% - 45%);
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.seed span {
position: relative;
width: min(14px, 4vw);
height: min(14px, 4vw);
border-radius: 0 100% 50% 100%;
background-color: #000;
transform: rotate(45deg);
}
/* スイカ(種 / 1段目) */
.seed span:nth-child(1) {
grid-column: 3;
}
/* スイカ(種 / 2段目) */
.seed span:nth-child(2) {
grid-row: 2;
grid-column: 2;
}
.seed span:nth-child(3) {
grid-row: 2;
grid-column: 4;
}
/* スイカ(種 / 3段目) */
.seed span:nth-child(4) {
grid-row: 3;
grid-column: 1;
}
.seed span:nth-child(5) {
grid-row: 3;
grid-column: 3;
}
.seed span:nth-child(6) {
grid-row: 3;
grid-column: 5;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.