吹き出しの吹き出しの部分を左向きにしたい

htmlに

<div class="balloon1">
  <p>こんにちは。これは例です。</p>
</div>

と書いてcssに


.balloon1 {
 	position: relative;
	display: inline-block;
 	margin: 1.5em 0;
	padding: 7px 10px;
	min-width: 120px;
 	max-width: 100%;
 	color: #555;
	font-size: 16px;
	background: #e0edff;
	border-radius: 15px;
}

.balloon1:before{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
 	margin-left: -15px;
	border: 15px solid transparent;
	border-top: 15px solid #e0edff;
}

.balloon1 p {
	margin: 0;
	padding: 0;
}

と書いて吹き出しを作りました。しかしこれでは吹き出しの吹き出しの部分が下向きになってしまいます。吹き出しの部分を左向きにしたいので、いろいろとcssを書き換えて見ましたがうまくいかず。。。この四角の感じで、吹き出しの部分を左向きにしたいのですがどうしたらいいでしょうか？また、吹き出しを枠線だけ青色をつけて、吹き出しの中（backgroundに当たる？）は白にしたいのですが、その方法も聞きたいです。

参考サイトはhttps://saruwakakun.com/html-css/reference/speech-bubble#section2

行動規範の内容に同意します

回答2件

ベストアンサー

css
1body{
2  background: palegreen;
3}
4
5.balloon1 {
6  position: relative;
7  display: inline-block;
8  margin: 1.5em /*0*/;
9  padding: 7px 10px;
10  min-width: 120px;
11  max-width: 100%;
12  color: #555;
13  font-size: 16px;
14  background: #e0edff;
15  border-radius: /*15px*/5px;
16  /*added*/border: 1px solid blue;
17}
18.balloon1:before{
19  content: "";
20  position: absolute;
21  top: /*100%*/50%;
22  left: /*50%*/0;
23  margin-left: /*-15px*/-20px;
24  /*border: 10px solid transparent;*/
25  /*border-top: 15px solid #e0edff;*/
26  /*added*/
27  transform: translateY(-50%);
28  width: 20px;
29  height: 20px;
30  background-size: 10px 10px;
31  background-position: 11px 0, 11px 10px, 10px 0, 10px 10px;
32  background-image:
33    linear-gradient(-45deg, #fff 50%, transparent 50%),
34    linear-gradient(-135deg, #fff 50%, transparent 50%),
35    linear-gradient(-45deg, blue 50%, transparent 50%),
36    linear-gradient(-135deg, blue 50%, transparent 50%);
37  background-repeat: no-repeat;
38}
39
40.balloon1 p {
41  margin: 0;
42  padding: 0;
43}

解説：

css
1.balloon1:before{
2  position: absolute;
3  top: 50%;/*親要素の高さ50%分，下へ*/
4  transform: translateY(-50%);/*子要素自身の高さの50%分，上へ*/
5  width: 20px;/*幅*/
6  height: 20px;/*高さ*/
7
8  /*以下で背景画像生成*/
9  background-size: 10px 10px;/*背景画像の幅・高さを設定（4枚分を一括指定）*/
10  /*↓4枚の画像の位置を設定，右上(1px右へずらす),右下(1pxずらす),右上(枠の代替),右下(枠の代替)*/
11  background-position: 11px 0, 11px 10px, 10px 0, 10px 10px;
12  background-image:
13    /*↓12時から反時計回りに45度の方向，半分までは白，その先は透明*/
14    linear-gradient(-45deg, #fff 50%, transparent 50%),
15    /*↓12時から反時計回りに135度の方向，同上*/
16    linear-gradient(-135deg, #fff 50%, transparent 50%),
17    /*↓12時から反時計回りに45度の方向，半分までは青，その先は透明*/
18    linear-gradient(-45deg, blue 50%, transparent 50%),
19    /*↓12時から反時計回りに135度の方向，同上*/
20    linear-gradient(-135deg, blue 50%, transparent 50%);
21  background-repeat: no-repeat;/*画像の繰り返しをキャンセル*/
22}