これは驚きの、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>
なんと、IE6で試しても動作しました。
border を使ってこんなことが出来るのは知りませんでした。
最新のブログ記事(新着順)
- 筆で書いたようなカナ書体「筆竹仮名B」
- 無料・商用利用可な丸文字ピクセルフォント「マルミーニャM」
- スペースコブラ風フォント
- Next.jsのVercelから商用利用可能なフリー汎用フォント「Geist Font 」
- 無料で使えるいい感じの日本語フォント「しっぽり太ゴシック」
- CSSのみで実装された500種類のローディングアニメーション「CSS Loaders」
- 画像ホバーで様々なエフェクトをかけられる「Izmir」
- CSSのbox-shadowをGUIで生成できる「CSS Box Shadows Generator」
- 好きな画像や文字を埋め込んだQRコードをリアルタイムで作れるWEBツール
- 約7500種の汎用ピクトグラムアイコン集「Phosphor Icons」
- 過去のエントリ