Blog

ブログ

  1. HOME
  2. ブログ
  3. 【CSS のみ】CSSで吹き出しを表示

【CSS のみ】CSSで吹き出しを表示

2022.12.27(火) 11:59

こちらの記事は

  • 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; }

ここには
テキスト

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA