質問編集履歴
5
あ
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
CSS吹き出しで
|
|
1
|
+
CSS吹き出しで「長方形と三角の内側を透過し、枠線は透過しない」は可能ですか？
|
test
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
###実現したいこと
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
「現状の吹き出し」を「目的の吹き出し」のようにしたいです。
|
|
6
4
|
|
|
7
5
|
|
|
8
6
|
|
|
@@ -16,7 +14,9 @@
|
|
|
16
14
|
|
|
17
15
|
###上図の現状の吹き出しのコード
|
|
18
16
|
|
|
17
|
+
上図の「現状の吹き出し」は下記のコードです。
|
|
18
|
+
|
|
19
|
-
|
|
19
|
+
どうしたら「目的の吹き出し」が作れるでしょうか？
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
4
目的の吹き出しを具体的に図示しておきました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
|
|
5
5
|
もちろんborderなのでこのままで透過させるのはムリだと思うのですが、ではどうすればこの「三角の内側」を透過させた吹き出しを作ることができるでしょうか？
|
|
6
6
|
|
|
7
|
+
|
|
8
|
+
|
|
7
|
-
|
|
8
10
|
|
|
9
11
|
|
|
10
12
|
|
|
@@ -12,17 +14,21 @@
|
|
|
12
14
|
|
|
13
15
|
|
|
14
16
|
|
|
15
|
-
###上の
|
|
17
|
+
###上図の現状の吹き出しのコード
|
|
18
|
+
|
|
19
|
+
上図の「現状の吹き出し」は下記ですが、どうしたら「目的の吹き出し」が作れるでしょうか？
|
|
16
20
|
|
|
17
21
|
|
|
18
22
|
|
|
19
23
|
●サンプル
|
|
20
24
|
|
|
21
|
-
[https://jsfiddle.net/
|
|
25
|
+
[https://jsfiddle.net/uneg9o7x/](https://jsfiddle.net/uneg9o7x/)
|
|
22
26
|
|
|
23
27
|
|
|
24
28
|
|
|
25
29
|
●コード
|
|
30
|
+
|
|
31
|
+
|
|
26
32
|
|
|
27
33
|
```html
|
|
28
34
|
|
|
@@ -46,15 +52,11 @@
|
|
|
46
52
|
|
|
47
53
|
.wrapper {
|
|
48
54
|
|
|
49
|
-
padding:
|
|
55
|
+
padding: 100px 20px;
|
|
50
56
|
|
|
51
|
-
background: r
|
|
57
|
+
background-image: url(http://urx.space/9W4K);
|
|
52
|
-
|
|
53
|
-
background: linear-gradient(90deg, rgba(21,156,164,1) 0%, rgba(170,130,69,1) 50%, rgba(136,0,255,1) 100%);
|
|
54
58
|
|
|
55
59
|
}
|
|
56
|
-
|
|
57
|
-
|
|
58
60
|
|
|
59
61
|
.say {
|
|
60
62
|
|
3
「内側」を明記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
吹き出し
|
|
1
|
+
吹き出しで「三角の内側」が透過できません。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
もちろんborderなのでこのままで透過させるのはムリだと思うのですが、ではどうすればこの三角の
|
|
5
|
+
もちろんborderなのでこのままで透過させるのはムリだと思うのですが、ではどうすればこの「三角の内側」を透過させた吹き出しを作ることができるでしょうか？
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
2
html誤字
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
|
|
33
33
|
<div class="say">
|
|
34
34
|
|
|
35
|
-
<p>
|
|
35
|
+
<p>三角の部分も透過させたいです。<br>そんな吹き出し、できませんか？</p>
|
|
36
36
|
|
|
37
37
|
</div>
|
|
38
38
|
|
1
透過させたい対象として「三角の部分」を明記いたしました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
吹き出し部分が透過できません。
|
|
1
|
+
吹き出しの三角の部分が透過できません。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
もちろんborderなので
|
|
5
|
+
もちろんborderなのでこのままで透過させるのはムリだと思うのですが、ではどうすればこの三角の部分を透過させた吹き出しを作ることができるでしょうか？
|
|
6
6
|
|
|
7
|
-
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
|
|
19
19
|
●サンプル
|
|
20
20
|
|
|
21
|
-
[https://jsfiddle.net/1
|
|
21
|
+
[https://jsfiddle.net/vcLz1a96/](https://jsfiddle.net/vcLz1a96/)
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|