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

公開日:2018/11/20 更新日:2018/11/24

やりたいこと

吹き出しのテキストボックスは、あいさつやコメントなど「人が喋っている感」を出すのに有効なレイアウトです
通常、この吹き出しは三角形をテキストボックスにくっつける方法が多いですが、このやり方だと線だけの吹き出しを作ることができません
今回は線だけで吹き出しを作る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です。