吹き出しを作るCSSのテスト。（追記、修正あり）

こ、これはすごいぜ。

これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
Fun With CSS Shapes – Nettuts

これは驚き！CSSだけで作れる吹き出しボックス。
次のような吹き出しが、画像を一切使わずにCSSだけで実現できてしまうようです。

えええ。マジっすか。

サンプル見てもにわかに納得できなかったので、試して検証してみる。

blockquote.comment {
width: 250px;
background-color:#e3e3e3 !important;
padding: 25px !important;
position: relative;
border: none !important;
}
blockquote.comment.withImage {
margin-left: 260px !important;
}
blockquote.comment .arrow {
width: 0;
height: 0;
line-height: 0;
border-top: 40px solid #e3e3e3;
position: absolute;
bottom: 60%;
}
blockquote.comment .arrow.right {
border-left: none;
border-right: 30px solid white;
right: -30px;
}
blockquote.comment .arrow.left {
border-right: none;
border-left: 30px solid white;
left: -30px;
}
blockquote.comment .arrow.test {
border-bottom: 1px solid #00f;
border-left: 1px solid #f00;
border-right: 30px solid #f90;
right: -30px;
}
blockquote.comment img {
position: absolute;
top: 0;
left: -235px;
}

吹き出し処理無しのblockquote。

「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」

「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」

「気持ち良かったですねえ。ほぼ、いきかけました」

吹き出し処理ありのblockquote。

「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」

「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」

「気持ち良かったですねえ。ほぼ、いきかけました」

吹き出し処理＋写真付きのblockquote。

「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」

「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」

「気持ち良かったですねえ。ほぼ、いきかけました」

おおお。ちょっと感動した。HTMLでは斜め線なんて引けないと思ってたのに、何でこんなことになるのか検証とか言っても全然わからんけど、でもちゃんと書けてるんだよなぁ。

元ネタのサイトの方には、このほかに吹き出し部分に角度を付けたり、上や下に持ってきたりするサンプルもあって結構柔軟に使えそうな感じ。

Fun With CSS Shapes – Nettuts+
I bet a bunch of you don’t realize that we can create the illusion of shapes by using 100% CSS. By utilizing the border property in creative ways, we can make some really interesting polygons. In this week’s screencast, we’ll figure out a way to create speech-bubbles without resorting to background images.

なんか久々にオラ、ワクワクしたぞ。

追記

他の人のブックマークコメントを眺めてたら、全部のボーダーの色変えてみるとわかるよ！（id:Rewish）と書かれていたので試してみる。

「ぼくは持ってますね。神が降りてきたという感じ。日本中のみんなが注目しているだろうと思って、自分の中で実況して、結果が出ないものですが、それで結果が出て壁を越えたと思います」

「もう苦しいところから始まって、苦しいが辛いになって、心が痛んで、最終的に笑顔になった」

「気持ち良かったですねえ。ほぼ、いきかけました」

グレーがborder-top、オレンジがborder-right、赤がborder-left、青がborder-bottom。

こうして見てみると、拮抗するような形でborderを設定するとそれぞれその中間地点まで干渉し合うっていう性質があるみたい。だから2つのborderの太さのバランスを変えると、吹き出し口の形状が変わるって言うことなんでしょう。しかし、んー…これって、仕様上正しいのかな？borderの役割から考えるときっと「結果こうなる」ってことであって、正しいということはないのかも。<br />なんかと同じ話で、バッドノウハウ的な話なのかもしれない。

…まぁでも将来のブラウザでこの通りにならなくなる可能性はあるとしても、斜めの線を引く、そして吹き出しを付けるっていう表現方法としては、これ以外にやろうとしたらもう画像ってことになっちゃうわけだし、それもねぇ…あんまりスマートではないので。JavaScriptで角丸を作るとかああいう無理矢理な手法に比べたら遙かにマシだし、これはあってもいいかなと個人的には思います。

追記その2

思いついたので何となくテスト。

div.test2 {
width: 0;
height: 0;
line-height: 0;
border-top: 40px solid #f00;
border-right: 40px solid #f90;
border-bottom: 40px solid #fc0;
border-left: 40px solid #ccc;
position: relative;
}

全てのborderを均一の大きさにするとこんな感じになる。

もし仮にborder-rightだけ大きさを半分にしてやると、こんな感じになる。

div.test2.right-half {
border-right: 20px solid #f90;
}

これを利用すればいろんな形の吹き出し口が作れそうです。

試しに真ん中に四角を作ってみるとこうなるので。

div.test2.square {
width: 20px;
height: 20px;
}

台形の吹き出し口だって出来ちゃうかも。

その他、ちっこくして右向き矢印に使うとか。

div.test3 {
width: 0;
height: 0;
line-height: 0;
border-top: 5px solid #fff;
border-right: 5px solid #fff;
border-bottom: 5px solid #fff;
border-left: 5px solid #ccc;
position: relative;
}

ちっこく＋台形でスピーカーみたいに見えるかもとか。

div.test3.speaker {
width: 5px;
height: 5px;
border-right: 5px solid #ccc;
border-left: 5px solid #fff;
background-color: #ccc;
}

ちょっとした描画に使えそうな気がしてきた。