CodingMania

CodingMania

2011/3/7

背景画像で作る可変する角丸ボックス

CSSで四隅に背景画像を使うことで、可変する角丸ボックスを作ります。

4隅の角丸を背景として、一つにまとめています。

デモページへopen_in_new

HTMl

<div class="mod_Kadomaru001">
<span class="mod_Kadomaru001_topleft"></span>
<span class="mod_Kadomaru001_topright"></span>
<!-- ↓ここからコンテンツ -->
<h2>タイトル</h2>
<p>幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。幅、高さ可変の角丸。</p> 
<!-- ↑ここまでコンテンツ -->
<span class="mod_Kadomaru001_bottomleft"></span>
<span class="mod_Kadomaru001_bottomright"></span>
<!-- mod_Kadomaru001_end --></div>

CSS

.mod_Kadomaru001{
	width:220px; /* 横幅 */
	padding:15px;
	position: relative;
	background-color: #DDD;
}
.mod_Kadomaru001 h2{
	font-weight:bold;
}

/* 上左画像 */
.mod_Kadomaru001_topleft{
	width:15px;
	height:15px;
	position: absolute;
	top:0;
	left:0;
	background:transparent url("Kadomaru_001_bk.gif") no-repeat top left;
}
/* 上右画像 */
.mod_Kadomaru001_topright{
	width:15px;
	height:15px;
	position: absolute;
	top:0;
	right:0;
	background:transparent url("Kadomaru_001_bk.gif") no-repeat top right;
}
/* 下左画像 */
.mod_Kadomaru001_bottomleft{
	width:15px;
	height:15px;
	position: absolute;
	bottom:0;
	left:0;
	background:transparent url("Kadomaru_001_bk.gif") no-repeat bottom left;
}
/* 下右画像 */
.mod_Kadomaru001_bottomright{
	width:15px;
	height:15px;
	position: absolute;
	bottom:0;
	right:0;
	background:transparent url("Kadomaru_001_bk.gif") no-repeat bottom right;
}

© CodingMania.net