こちらの記事は
- CSS
- html
の知識がある方向けの記事です。
CSS で吹き出しを表示させたい
まずは下記をご覧ください。
吹き出し
上記はdivの箱にcssの擬似要素（:before）で三角を追加しています。
<div class="baloon">吹き出し</div>.baloon { width: 400px; padding: 10px; background: #FF3399; position: relative; color: #fff; border-radius: 5px; text-align: center; } .baloon:before { content: ""; position: absolute; bottom: -20px; right: 10%; border: 10px solid transparent; border-top: 10px solid #FF3399; }丸の拭き出し
使念のため丸バージョンも追加しておきます。
<div class="circle">
<p class="inner">ここには<br>
テキストがはいります。</p>
</div>.circle { width: 100px; height: 100px; margin: 0 0 20px 0; padding: 5px; background: #888888; position: relative; color: #fff; border-radius: 50%; text-align: center; } .circle .inner { position: absolute;
left: 50%;
top: 50%;
line-height: 1.2;
font-size: 1.5rem;
transform: translate(-50%,-50%);
width: 100%;
margin: 0; } .circle:before { content: ""; position: absolute; bottom: -19px; right: 42%; border: 10px solid transparent; border-top: 10px solid #888888; }ここには
テキスト
コメントを残す