CSSで吹き出しを作る
これは吹き出し内の文字。
これを右吹き出しにしてみたい。
これは吹き出し内の文字。
あ・・・三角形の向きが逆だ(--;
これは吹き出し内の文字。
これは吹き出し内の文字。
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>ただ、これだと、ふち線をつけられないんだよね。 かわいい吹き出しにするには、もう少し調べものが必要だ。
スポンサーリンク