CSSでフレキシブルな角丸コーナー

さて本日は・・・頻繁に使うであろうCSSで角丸ボックスというやつです。
ネット見ればあちこちにあるだろうけど、今回の肝は上下の幅ともフレキシブルに対応できるもの。
かつソースもできるだけ削って、空のDIVもなくすという方向で。
基本的に縁の画像は10Px。


【HTML部分】

左上イメージ
右上イメージ
本文テキスト
左下イメージ
右下イメージ

【CSS部分】
/*—角丸コーナーボックス—*/
/*ボックス上部*/
.cornerflexbox-top {
width: 80%;
margin: 0;
height: 10px;
background: url(上部縁の真中用画像) top left repeat-x;
}
.cornerflexbox-top div.leftcorner {
float: left;
width: 10px;
height: 10px;
background: url(上部縁の左用画像) no-repeat;
font-size: 0;
line-height: 0;
}
.cornerflexbox-top div.rightcorner {
float: right;
width: 10px;
height: 10px;
background: url(上部縁の右用画像) no-repeat;
font-size: 0;
line-height: 0;
}
/*ボックス真ん中(コンテンツ部分)*/
.cornerflexbox-body {
clear: both;
width: 80%;
margin: 0;
background: url(中部縁の左用画像) right top repeat-y;
}
.cornerflexbox-body div.cornerflexbox-content {
height: auto;
margin-right: 10px;
padding-left: 10px;
background: #背景色 url(中部縁右用と本体部分の画像) repeat-y;
text-align: center;
}
/*ボックス下部*/
.cornerflexbox-bottom {
clear: both;
width: 80%;
height: 10px;
background: url(下部縁の真ん中用画像) top left repeat-x;
}
.cornerflexbox-bottom div.leftcorner {
float: left;
width: 10px;
height: 10px;
background: url(下部縁の左用画像) no-repeat;
font-size: 0;
line-height: 0;
}
.cornerflexbox-bottom div.rightcorner {
float: right;
width: 10px;
height: 10px;
background: url(下部縁の右用画像) no-repeat;
font-size: 0;
line-height: 0;
}
/*end角丸コーナーボックス*/
/*非表示用*/
.hide {
visibility: hidden;
}
a > .hide {
display: none;
}
html>body #box .hide {
display: none;
}
以上
分かりにくくてすまない・・・。
空のDivを作らないように説明文を入れて消すということもしてるが、それがいやなら空のままでもいいし。
まあ強引に空DIV消した感じだ・・・。
ということで、結構使えるんじゃなかろうか?
WinのFF3、Opera9.25、IE6、IE7で確認済み。
単色のコーナーボックスでいいのであれば、もう少しシンプルにフレキシブルなものがつくれるので、その辺はまあ応用というか、これよりは簡単だ。
これはコーナーというか縁取り全体が画像で好きなデザインでというのが目標でしたので。

関連しているかもしれない記事

コメントを残す

メールアドレスが公開されることはありません。