質問編集履歴

1

情報の追加

2021/02/09 09:36

投稿

cafe1111
cafe1111

スコア62

test CHANGED
File without changes
test CHANGED
@@ -20,85 +20,85 @@
20
20
 
21
21
  ```
22
22
 
23
- ```scss
23
+ ```css
24
24
 
25
- div{
25
+ div {
26
26
 
27
- display: inline-block;
27
+ position: relative;
28
28
 
29
- position: relative;
29
+ font-family: Arial;
30
30
 
31
- margin: 20px;
31
+ font-size: 20px;
32
32
 
33
- padding: 20px;
33
+ line-height: 120px;
34
34
 
35
- background: #fff;
35
+ text-align: center;
36
36
 
37
- border: 1px solid #666;
37
+ width: 250px;
38
38
 
39
- border-radius: 20px;
39
+ height: 120px;
40
40
 
41
- &::before {
41
+ border-radius: 10px;
42
42
 
43
- content: "";
43
+ padding: 0px;
44
44
 
45
- position: absolute;
45
+ border: #000 solid 4px;
46
46
 
47
- bottom: -30px;
48
-
49
- left: 40px;
47
+ }
50
-
51
- transform-origin: left top;
52
-
53
- transform: skewX(-40deg);
54
48
 
55
49
 
56
50
 
57
- width: 0;
51
+ div::before {
58
52
 
59
- height: 0;
53
+ content: "";
60
54
 
61
- border-top: 30px solid #666;
55
+ position: absolute;
62
56
 
63
- border-left: 12px solid transparent;
57
+ width: 0;
64
58
 
65
- border-right: 12px solid transparent;
59
+ z-index: 0;
66
60
 
67
- transform-origin: left top;
61
+ border-style: solid;
68
62
 
69
- transform: skewX(-40deg);
63
+ border-width: 0 44px 24px 0;
70
64
 
71
- }
65
+ border-color: transparent #000 transparent transparent;
72
66
 
73
- &::after {
67
+ top: 25%;
74
68
 
75
- content: "";
69
+ left: -48px;
76
70
 
77
- position: absolute;
71
+ margin-top: -14px;
78
72
 
79
- bottom: -26px;
73
+ display: block;
80
74
 
81
- left: 43px;
75
+ }
82
76
 
83
- transform-origin: left top;
84
77
 
85
- transform: skewX(-40deg);
86
78
 
87
- width: 0;
79
+ div::after {
88
80
 
89
- height: 0;
81
+ content: "";
90
82
 
91
- border-top: 30px solid #fff;
83
+ position: absolute;
92
84
 
93
- border-left: 12px solid transparent;
85
+ display: block;
94
86
 
95
- border-right: 12px solid transparent;
87
+ width: 0;
96
88
 
97
- transform-origin: left top;
89
+ z-index: 1;
98
90
 
99
- transform: skewX(-40deg);
91
+ border-style: solid;
100
92
 
93
+ border-width: 0 40px 20px 0;
94
+
95
+ border-color: transparent #000000 transparent transparent;
96
+
101
- }
97
+ top: 25%;
98
+
99
+ left: -40px;
100
+
101
+ margin-top: -10px;
102
102
 
103
103
  }
104
104