角アール
css3が主流になりつつある今では古い手法ですが割と応用できるかも。
before:after:擬似要素で画像を使った角丸boxです。
要素に対応しているブラウザは角が丸くなります。角丸分のスペースは増えません。
対応していないブラウザでも高さ幅はかわらないのでレイアウトは崩れません。
擬似要素を追加して角を丸くしたbox
before: after: 擬似要素を使ってないboxです。
左のボックスと同じパディングを設定しています。角丸分のスペースは減りません。
対応していないブラウザでは要素が表示されないのでレイアウトは崩れません。
なにもせずbox
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.kad, .non_kad { background:#e9967a; /* 土台のpaddingに疑似要素をマイナスマージンで重ねる */ padding:20px; } .kad:before {/* 画像のサイズはw10px h10px */ /* 左の画像はcontentで */ content: url(kad_tl.gif); /* 右の画像はbackgroundで */ background: transparent url(kad_tr.gif) no-repeat top right; height: 20px; margin: -20px -20px 0;/* マイナスマージンで位置調整 */ line-height:0; font-size:1px; display: block; } .kad:after { content: url(kad_bl.gif); background: transparent url(kad_br.gif) no-repeat bottom right; height:10px; padding-top:10px; margin:0 -20px -20px; line-height:0; font-size:1px; display: block; } |
contentに左の角丸、バックグラウンドに右の角丸
背景色はtransparentで透かします。opera対策。
paddingは調整できるよ
【:before および :after 擬似要素のcontentプロパティで角丸ボックスを作る簡単な説明】
IEは8から、content:url( );で画像を表示できるようになりました。
ローカルでプレビューするときは、ツール→互換表示設定→「互換表示でイントラネット サイトを表示する」のチェックを外すと吉ですよ。
とひよこ（兄の方）が申しております。
青い線が before: と after: 部分です。
この角丸の画像は幅高さ10px。土台の要素に重ねるので、角丸の余白は背景のカラーをつけなきゃならないのが難点。（この例では白バックの角丸画像）
パディング分をbefore: after: のマイナスマージンで位置調整します。
