CSSで吹き出しを作る


スポンサーリンク

CSS で、吹き出しを作る場合、検索で見つかるのは、基本的に1行吹き出しが多いんですよね。 基本形
これは吹き出し内の文字。


これを右吹き出しにしてみたい。
これは吹き出し内の文字。
あ・・・三角形の向きが逆だ(--;
これは吹き出し内の文字。
これは吹き出し内の文字。
CSS で、吹き出しを作る場合、検索で見つかるのは、基本的に1行吹き出しが多いんですよね。 基本形
<div class="balloon">
  これは吹き出し内の文字。
<div class="triangle"></div>
</div>

<style>
.balloon {
  position: relative;
  height: 30px;
  background-color: #ccc;
  text-align: center;
}
.balloon .triangle {
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid #ccc;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}
</style>


三角の向きが逆
<div class="lballoon">
<div class="ltriangle"></div>
  これは吹き出し内の文字。
</div>

<style>
.lballoon {
  position: relative;
  /*width: 200px;*/
  height: 30px;
margin:0 0 0 30px;
  background-color: #ccc;
  text-align: center;
}
.lballoon .ltriangle {
  position: absolute;
  margin-top: 5px;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 10px solid #ccc;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
</style>


CSSで吹き出しを作るソース

いいみたい
<div class="llballoon">
<div class="lltriangle"></div>
  これは吹き出し内の文字。<br />
  これは吹き出し内の文字。<br />
</div>

<style>
.llballoon {
  position: relative;
  /*width: 200px;*/
  /*height: 30px;*/
margin:0 0 0 30px;
  background-color: #ccc;
  text-align: center;
}
.llballoon .lltriangle {
  position: absolute;
  margin-top: 5px;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-right: 15px solid #ccc;

  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
</style>

ただ、これだと、ふち線をつけられないんだよね。 かわいい吹き出しにするには、もう少し調べものが必要だ。

スポンサーリンク