ミギムキ

[CSS] 線で吹き出しを作りたい

やりたいこと

サンプルコード

html

<div class="speech_balloon"> <p>だが断る</p> </div>

CSS(上にしっぽをつける)

.speech_balloon { position: relative; padding: 30px; margin: 30px 0px 0px; border: 1px solid #3388dd; background-color: #fff; } .speech_balloon::before { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 30px; height: 30px; background-color: #fff; border-top: 1px solid #3388dd; border-left: 1px solid #3388dd; content: ""; }

CSS(下にしっぽをつける)

.speech_balloon { position: relative; padding: 30px; margin: 0px 0px 30px; border: 1px solid #3388dd; background-color: #fff; } .speech_balloon::before { position: absolute; bottom: -16px; left: 50%; transform: translateX(-50%) rotate(-135deg); width: 30px; height: 30px; background-color: #fff; border-top: 1px solid #3388dd; border-left: 1px solid #3388dd; content: ""; }

CSS(右にしっぽをつける)

.speech_balloon { position: relative; padding: 30px; margin: 0px 30px 0px 0px; border: 1px solid #3388dd; background-color: #fff; } .speech_balloon::before { position: absolute; transform: translateY(-50%) rotate(135deg); top: 50%; right: -16px; width: 30px; height: 30px; background-color: #fff; border-top: 1px solid #3388dd; border-left: 1px solid #3388dd; content: ""; }

CSS(左にしっぽをつける)

.speech_balloon { position: relative; padding: 30px; margin: 0px 0px 0px 30px; border: 1px solid #3388dd; background-color: #fff; } .speech_balloon::before { position: absolute; transform: translateY(-50%) rotate(-45deg); top: 50%; left: -16px; width: 30px; height: 30px; background-color: #fff; border-top: 1px solid #3388dd; border-left: 1px solid #3388dd; content: ""; }

仕組み、解説、補足など

  • 吹き出しのいわゆる「しっぽ」の部分は、小さいなbefore擬似要素にtopとleftだけborderをつけて回転させています
  • 背景色に白を指定して、テキストボックスの線とちょうど重なるように配置します

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。