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

前の記事 ≪：2009年4月6日管理人のブックマーク
次の記事 ≫：シンプルデザインだけど見やすい黒ベースのWEBレイアウト集

これは驚きの、CSSだけで作れる吹き出しボックス

2009年04月07日-

スポンサードリンク

Fun With CSS Shapes - Nettuts

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

HTMLコードをちょっと分かりやすいようにダイエットしてみたものが以下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
blockquote {
    margin: 0 0 50px 0; padding: 0;
}
blockquote#one {
    width: 250px;
    background: #e3e3e3;
    padding: 25px;
    position: relative;
}
blockquote#one .arrow {
    /* 吹き出しの部分 */
    width: 0;
    height: 0;
    line-height: 0;
    border-top: 40px solid #e3e3e3;
    border-left: none;
    border-right: 30px solid white;
    position: absolute;
    bottom: 60%;
    right: -30px;
}
</style>
</head>

<body>
<div id="wrap">
<blockquote id="one">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<span class="arrow" /> 
</blockquote>
</div>
</body>
</html>