.box {
width: 100px;
height: 100px;
background-color: red;
display: flex;
align-items: center;
justify-content: center;
margin: 32px;
div {
width: 74px;
height: 74px;
background-color: rgb(255, 255, 255);
}
}
.p1 {
clip-path: polygon(
16.6% 16.6%,
33.3% 0%,
50% 16.6%,
66.6% 0%,
83.3% 16.6%,
100% 33%,
83.3% 50%,
100% 66.6%,
83.3% 83.3%,
66.6% 100%,
50% 83.3%,
33.3% 100%,
16.6% 83.3%,
0% 66.6%,
16.6% 50%,
0% 33%
);
}
.p2 {
clip-path: polygon(
20% 20%,
33.3% 0%,
50% 16.6%,
66.6% 0%,
80% 20%,
100% 33%,
83.3% 50%,
100% 66.6%,
80% 80%,
66.6% 100%,
50% 83.3%,
33.3% 100%,
20% 80%,
0% 66.6%,
16.6% 50%,
0% 33%
);
}
.p3 {
clip-path: polygon(
23.3% 23.3%,
33.3% 0%,
50% 16.6%,
66.6% 0%,
76.6% 23.3%,
100% 33%,
83.3% 50%,
100% 66.6%,
76.6% 76.6%,
66.6% 100%,
50% 83.3%,
33.3% 100%,
23.3% 76.6%,
0% 66.6%,
16.6% 50%,
0% 33%
);
}
.p4 {
clip-path: polygon(
26.6% 26.6%,
33.3% 0%,
50% 16.6%,
66.6% 0%,
73.3% 26.6%,
100% 33%,
83.3% 50%,
100% 66.6%,
73.3% 73.3%,
66.6% 100%,
50% 83.3%,
33.3% 100%,
26.6% 73.3%,
0% 66.6%,
16.6% 50%,
0% 33%
);
}
