CSS で吹き出しを描画
CSS のお勉強、今回は下記のような吹き出しを CSS で描画したい
吹き出し付き
HTML はこれだけです
<div class="baloon"> <p>吹き出し付き</p> </div>
これに対し CSS コードはこれでできます
.baloon { position: relative; display: inline-block; margin: 1em 2em; padding: 0 1em; top: 50%; min-width: 10em; background: #ffede0; } .baloon::before { content: ""; position: absolute; top: 50%; left: -2em; margin-top: -0.5em; border: 0.5em solid transparent; border-right: 2em solid #ffede0; }
::before
は疑似要素というらしく、イメージとしては
<div class="baloon"> <div class="baloon::before"/> <p>吹き出し付き</p> </div>
こんな感じにインライン要素の直前に差し込むのと同じ効果があるとか
::after
だとインライン要素の直後になります
この吹き出し、画像を一切使ってないので下記のように書き換えると
.baloon { position: relative; display: inline-block; margin: 1em 2em; padding: 0 1em; top: 50%; min-width: 10em; background: #ffede0; border-radius: 1em; //追記 } .baloon::before { content: ""; position: absolute; top: 50%; left: -2em; margin-top: -0.5em; border: 0.5em solid transparent; border-right: 2em solid #ffede0; }
吹き出しの角を丸めることができる!
角丸吹き出し付き
画像を使わない装飾はたくさん覚えたいですね