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