このエントリーをはてなブックマークに追加
Pocket

#wrapper{ width:800px; border:1px solid #ddd; background:#fff; padding:15px; margin:0 auto; box-sizing: border-box; } h2{ font-size:28px; color:#0079b2; padding-left:16px; padding-top:4px; padding-bottom:4px; margin:0; position: relative; left:-16px; border-left:5px solid #0079b2; } h3{ font-size:20px; color:#0079b2; padding-top:8px; padding-bottom:8px; border-top:1px dotted #ccc; border-bottom:1px dotted #ccc; margin-top:50px; margin-bottom:8px; position: relative; } h4{ font-size:16px; color:#ff776c; display: block; padding:0; margin-top:40px; margin-bottom:8px; border-bottom:1px dotted #ff776c; } #box{ width:400px; height: 150px; margin:30px auto; } .fl{ float: left; } .fr{ float:right; } .mgl50{ margin-left:50px; }

フキダシサンプル

角丸フキダシ

フキダシ
フキダシ
フキダシ

CSS

HTML

丸いフキダシ

フキダシ
フキダシ
フキダシ

CSS

HTML

リボンサンプル

左右切り欠きリボン

リボンサンプル1

CSS

HTML

左側だけ切り取ったステッカー

リボンサンプル2

CSS

HTML

折れてるリボン

オビ左折れサンプル(width:auto指定なので長さは可変します)

オビ右折れサンプル

CSS

HTML

]]>