CSS吹き出しで「長方形と三角の内側を透過し、枠線は透過しない」は可能ですか？

Question

###実現したいこと
「現状の吹き出し」を「目的の吹き出し」のようにしたいです。

![

###上図の現状の吹き出しのコード
上図の「現状の吹き出し」は下記のコードです。
どうしたら「目的の吹き出し」が作れるでしょうか？

●サンプル
https://jsfiddle.net/uneg9o7x/

●コード

<div class="wrapper">

  <div class="say">
    <p>三角の部分も透過させたいです。<br>そんな吹き出し、できませんか？</p>
  </div>

</div>

.wrapper {
  padding: 100px 20px;
  background-image: url(http://urx.space/9W4K);
}
.say {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: transparent;
  border: solid 3px #fff;
  box-sizing: border-box;
}
.say:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}
.say:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #fff;
  z-index: 1;
}
.say p {
  color: #fff;
  margin: 0;
  padding: 0;
}

Comments

[x_x]

> borderなので当然ですが
伝わりません。どのようにしたいのか図示できないでしょうか？

[junoreku]

図示しました。三角の部分です。すみませんでした。

Answer 1

.say {
  border-left-color: transparent;
}

.say:before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  bottom: -3px;
  width: 3px;
  background: linear-gradient(to bottom, #fff calc(50% - 11px), transparent calc(50% - 11px), transparent calc(50% + 11px), #fff calc(50% + 11px));
}

.say:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -8px;
  height: 16px;
  width: 16px;
  border-bottom: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(45deg);
  transform-origin: top right;
}

やや無理やりな感じがしますかね？
border-image を使うのが本手かと。
https://developer.mozilla.org/ja/docs/Web/CSS/border-image

Comments

[junoreku]

ナイスな工夫ですね。ありがとうございます。

[junoreku]

ご回答の方法で出来ますね。失礼致しました。

[x_x]

なぜ謝っているのかわかりませんが解決したのでしょうか？

Answer 2

#fffのところをrgba(255,255,255,0.5)に変えればいいような気がするのですが、そういうことではなく？

または、.say{opacity:0.5}とか。

コメントを受けて追記

.say::before{opacity:0.5}とかで、三角形部分だけ透過できます。

Comments

[Lhankor_Mhy]

ん？　もしかして、wrapper の背景を抜きたいとか、そういうこと？

[SakuBlade]

左の三角部分のことでしょうか？

[Lhankor_Mhy]

そちらなら、.say{opacity:0.5} で解決すると思います。
「内側を透過させたい」というのはもしかして「背景も含めて内側を透過させたい」なのかな、と。

[junoreku]

質問がわかりにくかったですね。すみません。透過させたいのは三角の部分です。質問を修正しておきました。

[Lhankor_Mhy]

ということは、文字や枠線は透過させないということですね。
あとで追記します。

[Lhankor_Mhy]

追記しました。

[junoreku]

はい、文字や枠線は透過させません。三角の内側だけです。

ご追記の件ですが、変化ないと思います。

[Lhankor_Mhy]

おやまあ。当方では三角部分が半透明になるのですが、環境の問題ですかね……？

[Lhankor_Mhy]

ん？内側？
ということはもしかして、三角形の枠線だけ残したい、という意味ですか？

[junoreku]

>2019/03/06 18:23
というか、枠線は透過させたくありませんので、before全体にopacityはおかしくないですか？

[junoreku]

>2019/03/06 18:24
です。

[Lhankor_Mhy]

それを早く言ってほしかった……

[Lhankor_Mhy]

ちなみに、三角形を2つ重ねてある（beforeとafter）ようですが、これは無視してよろしいですか？

[junoreku]

HTMLもCSSもすべて改変してくださって大丈夫です。

[junoreku]

いけそうですか？ゴールを具体的に図示して質問に載せたのでよろしければご覧頂ければと思います。

[Lhankor_Mhy]

x_xさんと内容がかぶったので、テンション下がっているところです。
他にはちょっと思いつかないですね。

[junoreku]

すみません、x_xさんのではできないと思い込んでいたので質問の図を変えてLhankor_Mhyさんにもさらに聞いてしまいましたが、どうやらx_xさんので出来てましたね。
それはテンション下がりますねｗｗお気持ちは忘れませんｗありがとうございました。

[Lhankor_Mhy]

私の問題読解力が低くてご迷惑おかけしました。
ご解決されて何よりでした！

Answer 3

.sayのborderの色指定を透過にしてみてはどうでしょう。

border: solid 3px #fff0;

Comments

[junoreku]

質問がわかりにくかったですね。すみません。透過させたいのは三角の部分です。