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}