左上に吹き出しがあるチャット風ボックスを作りたい

Question

■やりたいこと
写真みたいに左上に吹き出しがあるチャット風ボックスを作りたい。

■行動したこと
左下ならできたが左上ができない。

<div>aaaaa</div>

div {
  position: relative;
  font-family: Arial;
  font-size: 20px;
  line-height: 120px;
  text-align: center;
  width: 250px;
  height: 120px;
  border-radius: 10px;
  padding: 0px;
  border: #000 solid 4px;
}

div::before {
  content: "";
  position: absolute;
  width: 0;
  z-index: 0;
  border-style: solid;
  border-width: 0 44px 24px 0;
  border-color: transparent #000 transparent transparent;
  top: 25%;
  left: -48px;
  margin-top: -14px;
  display: block;
}

div::after {
  content: "";
  position: absolute;
  display: block;
  width: 0;
  z-index: 1;
  border-style: solid;
  border-width: 0 40px 20px 0;
  border-color: transparent #000000 transparent transparent;
  top: 25%;
  left: -40px;
  margin-top: -10px;
}

Comments

[m.ts10806]

コンパイル後のCSSをご提示ください
あと、今どうなってますか？「できない」では分かりません。
吹き出しを作るCSSとかそれなりに出てるので探して出ないことはないかと思いますが。

[cafe1111]

scssは消してcssにしました。
今、吹き出し部分を枠線のみにしたいのですが、どうしても背景が黒くなってしまい解決策を模索しています。
それなりに調べましたが斜めの上の枠線のみの吹き出しの作成の仕方は見つからなかったです。

Answer 1

どうぞ。

CSS Speech Bubble | CSS Arrow | Speech Bubble With Border
CSS Arrow Please - By Simon Hoejberg - @shojberg

Comments

[cafe1111]

回答ありがとうございます。
吹き出しのところの背景色を消して枠線のみにしたいのですが、解決策わかりますでしょうか？

[Lhankor_Mhy]

構造上、それは難しいのではないでしょうか？

[cafe1111]

かしこまりました！
背景は白にして実装してみます。
ご丁寧にありがとうございました！