Card by UpdatedAi

1.card {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  position: relative;
6  width: 300px;
7  height: 300px;
8}
9
10.card * {
11  position: absolute;
12}
13
14/* Define each decagon with its specific size and background color */
15.decagon1,
16.decagon2,
17.decagon3,
18.decagon4,
19.decagon5 {
20  clip-path: polygon(
21    50% 0%,
22    61% 20%,
23    80% 35%,
24    100% 50%,
25    80% 65%,
26    61% 80%,
27    50% 100%,
28    39% 80%,
29    20% 65%,
30    0% 50%,
31    20% 35%,
32    39% 20%
33  );
34  transition: all 0.3s ease-in-out;
35}
36
37.decagon1 {
38  width: 250px;
39  height: 250px;
40  background: #03045e;
41}
42
43.decagon2 {
44  width: 220px;
45  height: 220px;
46  background: #0077b6;
47}
48
49.decagon3 {
50  width: 190px;
51  height: 190px;
52  background: #00b4d8;
53}
54
55.decagon4 {
56  width: 160px;
57  height: 160px;
58  background: #90e0ef;
59}
60
61.decagon5 {
62  width: 130px;
63  height: 130px;
64  background: #caf0f8;
65}
66
67/* Hover animations for each decagon */
68.card:hover .decagon1 {
69  transform: scale(1.3) rotate(45deg);
70}
71
72.card:hover .decagon2 {
73  transform: scale(1.3) rotate(90deg) translate(-20px, 20px);
74}
75
76.card:hover .decagon3 {
77  transform: scale(1.3) rotate(135deg) translate(-40px, 40px);
78}
79
80.card:hover .decagon4 {
81  transform: scale(1.3) rotate(180deg) translate(-60px, 60px);
82}
83
84.card:hover .decagon5 {
85  transform: scale(1.3) rotate(225deg) translate(-80px, 80px);
86}
87