Card by UpdatedAi
#212121
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: #f8cc07; 41} 42 43.decagon2 { 44 width: 220px; 45 height: 220px; 46 background: #b0b600; 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: rgba(56, 34, 68, 0.467); 59} 60 61.decagon5 { 62 width: 130px; 63 height: 130px; 64 background: #f6b103; 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
105 views
Variation of acard
MIT License