#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 background: lightgrey; 5 position: relative; 6 transform: skewY(-10deg); 7 border: 5px solid #6d74e3; 8 box-sizing: border-box; 9 transition: all 0.3s; 10} 11 12.card::before { 13 content: ''; 14 width: 10px; 15 height: 254px; 16 background: #6d74e3; 17 position: absolute; 18 top: -5px; 19 left: -14.7px; 20 transform-origin: right; 21 transform: skewY(45deg); 22 border: none; 23 transition: all 0.5s; 24} 25 26.card::after { 27 content: ''; 28 height: 10px; 29 width: 190px; 30 background: #6d74e3; 31 position: absolute; 32 top: -14.7px; 33 left: -5px; 34 transform-origin: bottom; 35 transform: skewX(45deg); 36 border: none; 37 transition: all 0.5s; 38} 39 40.card:hover { 41 transform: skewY(0deg); 42} 43 44.card:hover::before { 45 width: 0px; 46 height: 249px; 47 left: 0; 48 top: 0.1px; 49} 50 51.card:hover::after { 52 width: 184px; 53 height: 0px; 54 left: 0.1px; 55 top: 0; 56} 57 58.card__content { 59 padding: 10px; 60 color: #323232; 61}
Comments
MIT License