cssで吹き出し

なんか面白かったからつい…
というかどういう必要性に駆られて生まれたのかが気になる(・ω・`)

cssで吹き出しを作ろう

たとえばこんな感じ

('A`)




Σ('A`)

構造はこんな感じ

<style>
.fukidashi_outline{
    padding-bottom: 10px;
    position: relative;
}
.fukidashi_msg{
    position: relative;
    background-color: #ccc;
    height: 50px;
    width: 100px;
    color: #3a3a3a;
    padding: 5px;
    border-radius: 10px;
}
.fukidashi_msg:after{
    content: '';
    position: absolute;
    border-top: 10px solid #ccc;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    bottom: -9px;
    left: 6px;
}

</style>

<div class="fukidashi_outline">
    <div class="fukidashi_msg">
        たとえばこんな感じ
    </div>
</div>

メッセージ本体部と, 周りとの距離を測る部分, そこに吹き出しの三角形部分を作る cssを足して吹き出しに見せる. それだけ.シンプルです.

キモは15～23行目. ここで疑似クラスの :afterを用いて三角形を作り, 角を丸めた長方形の下にきれいにつくように配置する.

要するに三角形の位置と向きななわけだ

('A`)

Σ('A`)

三角形を横にするのもシンプル. 斜線を leftと rightで作っていたのを topと bottomに, 上底?を書いていた borderを border-leftにしてやり, 後は位置調整.

<style>
.fukidashi_outline2{
    padding-right: 12px;
    position: relative;
    display: table-cell;
}
.fukidashi_msg2{
    position: relative;
    background-color: #ccc;
    height: 50px;
    width: 100px;
    color: #3a3a3a;
    padding: 5px;
    border-radius: 10px;
}
.fukidashi_msg2:after{
    content: '';
    position: absolute;
    border-left: 10px solid #ccc;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    top: 10px;
    left: 110px;
}

.fukidashi_set2{
    display: table;
}

.fukidashi_chara2{
    display: table-cell;
    bottom: 10px;
}
</style>

<br />
<div class="fukidashi_set2">
    <div class="fukidashi_outline2">
        <div class="fukidashi_msg2">
            要するに三角形の位置と向きななわけだ
        </div>
    </div>
    <div class="fukidashi_chara2">
        ('A`)
    </div>
</div>

応用するとこんなことも…

('A`)

参考: CSSだけで簡単に吹き出しを作成する方法4つ！