teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップCSS3に関する質問尖らせる矢印 作り方

編集履歴

回答編集履歴

3

三角形の高さを調整

2021/01/24 05:20

投稿

Daregada
Daregada

スコア11990

test CHANGED
@@ -4,25 +4,33 @@
4
4
 
5
5
 
6
6
 
7
- ![サンプル](37f36446e9649793350727597eb28f07.png)
7
+ 補足: 三角形部分をより小さくするために、rotateとscaleYで変形させた。この変形により細く見えてしまう三角形部分のborderの太さや位置も微調整。
8
8
 
9
+
10
+
9
- 　
11
+ ![旧サンプル](37f36446e9649793350727597eb28f07.png)
12
+
13
+ ↓
14
+
15
+ ![新サンプル](45d20b3ccad64ae40926e90afa4e3e60.png)
16
+
17
+
10
18
 
11
19
  ```CSS
12
20
 
13
21
  .balloon {
14
22
 
15
- position: relative;
23
+ position: relative;
16
24
 
17
- height: 80px;
25
+ height: 80px;
18
26
 
19
- width: 400px;
27
+ width: 400px;
20
28
 
21
- color: black;
29
+ color: black;
22
30
 
23
- background: white;
31
+ background: white;
24
32
 
25
- border: 2px lightblue solid;
33
+ border: 2px lightblue solid;
26
34
 
27
35
  }
28
36
 
@@ -30,25 +38,25 @@
30
38
 
31
39
  .balloon:before {
32
40
 
33
- content: "";
41
+ content: "";
34
42
 
35
- position: absolute;
43
+ position: absolute;
36
44
 
37
- top: 100%;
45
+ top: 100%;
38
46
 
39
- left: 50%;
47
+ left: 50%;
40
48
 
41
- margin-left: -5px;
49
+ margin-left: -5px;
42
50
 
43
- height: 20px;
51
+ height: 20px;
44
52
 
45
- width: 20px;
53
+ width: 20px;
46
54
 
47
- background: inherit;
55
+ background: inherit;
48
56
 
49
- transform: rotate(45deg);
57
+ transform: scaleY(0.5) rotate(45deg);
50
58
 
51
- transform-origin:top right;
59
+ transform-origin: top right;
52
60
 
53
61
  }
54
62
 
@@ -56,31 +64,31 @@
56
64
 
57
65
  .balloon:after {
58
66
 
59
- content: "";
67
+ content: "";
60
68
 
61
- position: absolute;
69
+ position: absolute;
62
70
 
63
- top: 100%;
71
+ top: 100%;
64
72
 
65
- left: 50%;
73
+ left: 50%;
66
74
 
67
- margin-top: 4px;
75
+ margin-top: 3px;
68
76
 
69
- margin-left: -7px;
77
+ margin-left: -7px;
70
78
 
71
- height: 20px;
79
+ height: 20px;
72
80
 
73
- width: 20px;
81
+ width: 20px;
74
82
 
75
- background: transparent;
83
+ background: transparent;
76
84
 
77
- transform: rotate(45deg);
85
+ transform: scaleY(0.5) rotate(45deg);
78
86
 
79
- transform-origin:top right;
87
+ transform-origin: top right;
80
88
 
81
- border-bottom: 6px lightblue double;
89
+ border-bottom: 8px lightblue double;
82
90
 
83
- border-right: 6px lightblue double;
91
+ border-right: 8px lightblue double;
84
92
 
85
93
  }
86
94
 
@@ -88,7 +96,7 @@
88
96
 
89
97
  .balloon * {
90
98
 
91
- text-align: center;
99
+ text-align: center;
92
100
 
93
101
  }
94
102
 

2

CSSを誤ペーストしていたのを修正

2021/01/24 05:20

投稿

Daregada
Daregada

スコア11990

test CHANGED
@@ -10,6 +10,86 @@
10
10
 
11
11
  ```CSS
12
12
 
13
+ .balloon {
14
+
15
+ position: relative;
16
+
17
+ height: 80px;
18
+
19
+ width: 400px;
20
+
21
+ color: black;
22
+
23
+ background: white;
24
+
25
+ border: 2px lightblue solid;
26
+
27
+ }
28
+
29
+
30
+
31
+ .balloon:before {
32
+
33
+ content: "";
34
+
35
+ position: absolute;
36
+
37
+ top: 100%;
38
+
39
+ left: 50%;
40
+
41
+ margin-left: -5px;
42
+
43
+ height: 20px;
44
+
45
+ width: 20px;
46
+
47
+ background: inherit;
48
+
49
+ transform: rotate(45deg);
50
+
51
+ transform-origin:top right;
52
+
53
+ }
54
+
55
+
56
+
57
+ .balloon:after {
58
+
59
+ content: "";
60
+
61
+ position: absolute;
62
+
63
+ top: 100%;
64
+
65
+ left: 50%;
66
+
67
+ margin-top: 4px;
68
+
69
+ margin-left: -7px;
70
+
71
+ height: 20px;
72
+
73
+ width: 20px;
74
+
75
+ background: transparent;
76
+
77
+ transform: rotate(45deg);
78
+
79
+ transform-origin:top right;
80
+
13
- folder_name = tkinter.filedialog.askdirectory(initialdir=iDir)
81
+ border-bottom: 6px lightblue double;
82
+
83
+ border-right: 6px lightblue double;
84
+
85
+ }
86
+
87
+
88
+
89
+ .balloon * {
90
+
91
+ text-align: center;
92
+
93
+ }
14
94
 
15
95
  ```

1

三角形の位置を微調整

2021/01/23 16:43

投稿

Daregada
Daregada

スコア11990

test CHANGED
@@ -4,92 +4,12 @@
4
4
 
5
5
 
6
6
 
7
- ![サンプル](b99148c5980bdd64d04dfe3f3e386a97.png)
7
+ ![サンプル](37f36446e9649793350727597eb28f07.png)
8
8
 
9
9
  　
10
10
 
11
11
  ```CSS
12
12
 
13
- .balloon {
14
-
15
- position: relative;
16
-
17
- height: 80px;
18
-
19
- width: 400px;
20
-
21
- color: black;
22
-
23
- background-color: white;
24
-
25
- border: 2px lightblue solid;
26
-
27
- }
28
-
29
-
30
-
31
- .balloon:before {
32
-
33
- content: "";
34
-
35
- position: absolute;
36
-
37
- top: 100%;
38
-
39
- left: 50%;
40
-
41
- margin-left: -12px;
42
-
43
- height: 20px;
44
-
45
- width: 20px;
46
-
47
- background-color: inherit;
48
-
49
- transform: rotate(45deg);
50
-
51
- transform-origin:top right;
52
-
53
- }
54
-
55
-
56
-
57
- .balloon:after {
58
-
59
- content: "";
60
-
61
- position: absolute;
62
-
63
- top: 100%;
64
-
65
- left: 50%;
66
-
67
- margin-top: 4px;
68
-
69
- margin-left: -14px;
70
-
71
- height: 20px;
72
-
73
- width: 20px;
74
-
75
- background: transparent;
76
-
77
- transform: rotate(45deg);
78
-
79
- transform-origin:top right;
80
-
81
- border-bottom: 6px lightblue double;
13
+ folder_name = tkinter.filedialog.askdirectory(initialdir=iDir)
82
-
83
- border-right: 6px lightblue double;
84
-
85
- }
86
-
87
-
88
-
89
- .balloon * {
90
-
91
- text-align: center;
92
-
93
- }
94
14
 
95
15
  ```