「CSSだけで作れる吹き出しボックス」の簡易版 (空span無し)

先日話題になってた、css だけで吹き出しボックスを作るやつですけど、

これは驚きの、CSSだけで作れる吹き出しボックス:phpspot開発日誌
http://phpspot.org/blog/archives/2009/04/css_84.html

Fun With CSS Shapes - Nettuts+
http://net.tutsplus.com/videos/screencasts/fun-with-css-shapes/

こんなの発想してしまうのはすごいですねえ。すばらしい。ブラボー。
ただ、htmlソース側に空の <span> 要素が必要なところが、ちょっと気になるのです。見栄えのために、空の要素をソースに追加しないといけないという点が、ちょっと。

というわけで、なんとかならないもんかと試してみました。一応こんな感じでなら、htmlソース側もきれいにできるんじゃないかと思います。

css balloon

テストのテキストを入れています。おはようございます。ねむい棒。

ソースはこんな風。
html側は <p> 要素1つでOK。

<p class="balloon type1">css balloon</p>
<p class="balloon type2">テストのテキストを入れています。
おはようございます。ねむい棒。</p>

<style>
p.balloon {
	width: 10em;
	padding: 10px;
	background-color: #8ce;
}

p.balloon.type1 {
	border-left: 10px solid #8ce;
	border-bottom: 10px solid #fff;
	padding-left: 0;
}

p.balloon.type2 {
	border-right: 10px solid #8ce;
	border-bottom: 10px solid #fff;
	padding-right: 0;
}
</style>

吹き出し部分を角に持ってくるようにすれば、html 側はすっきりするんですよね。ほんとに css の border だけでできる。

まあ、元のやつよりちょっと見栄えは落ちますけど、こんな程度でもいいかーっていう場面もあるかもしれないなあ、と思い書いてみます。いかがでしょうかっ。