teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問左上に吹き出しがあるチャット風ボックスを作りたい

編集履歴

質問編集履歴

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