type-A : 入れ子型(固定)

A-1

コンテンツ部分
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis dolor id nisi tincidunt rutrum.

Images

bg_a1_box_top.png (w250xh10)
bg_a1_box_bottom.png (w250xh10)

HTML

<div class="box">
 <p class="content">
  コンテンツ部分
 </p>
</div>

CSS

div.box {
 background:#5e7ea0 url("bg_a1_box_top.png") left top no-repeat;
 width:250px;
}
 p.content {
 background:url("bg_a1_box_bottom.png") left bottom no-repeat;
 color:#f5f5f5;
 padding:15px;
}
Top

A-2

コンテンツ部分
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis dolor id nisi tincidunt rutrum.

Images

bg_a2_box_top.png (w250xh40)
bg_a2_box_bottom.png (w250xh10)

HTML

<div class="box">
 <p class="content">
  コンテンツ部分
 </p>
</div>

CSS

div.box {
 background:#365678 url("bg_a2_box_top.png") left top no-repeat;
 width:250px;
}
p.content {
 background:url("bg_a2_box_bottom.png") left bottom no-repeat;
 color:#f5f5f5;
 padding:15px;
}
Top

type-B : 入れ子型(可変)

B-1

コンテンツ部分
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis dolor id nisi tincidunt rutrum.

Images

bg_b1_box_tl.png (w10xh10)
bg_b1_box_tr.png (w10xh10)
bg_b1_box_bl.png (w10xh10)
bg_b1_box_br.png (w10xh10)

HTML

<div class="box">
 <div class="box2">
  <div class="box3">
   <div class="box4">
    <p class="content">
     コンテンツ部分
    </p>
   </div>
  </div>
 </div>
</div>

CSS

div.box {
 background:#5e7ea0 url("bg_b1_box_tl.png") left top no-repeat;
 width:30em;
}
div.box2 {
 background:url("bg_b1_box_tr.png") right top no-repeat;
}
div.box3 {
 background:url("bg_b1_box_bl.png") left bottom no-repeat;
}
div.box4 {
 background:url("bg_b1_box_br.png") right bottom no-repeat;
}
p.content {
 color:#f5f5f5;
 padding:15px;
}
Top

B-2

コンテンツ部分
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis dolor id nisi tincidunt rutrum.

Images

bg_b2_box_tl.png (w10xh40)
bg_b2_box_tc.png (w10xh40)
bg_b2_box_tr.png (w10xh40)
bg_b2_box_bl.png (w10xh10)
bg_b2_box_br.png (w10xh10)

HTML

<div class="box">
 <div class="box2">
  <div class="box3">
   <div class="box4">
    <div class="box5">
     <p class="content">
      コンテンツ部分
     </p>
    </div>
   </div>
  </div>
 </div>
</div>

CSS

div.box {
 background:#365678 url("bg_b2_box_tc.png") left top repeat-x;
 width:30em;
}
div.box2 {
 background:url("bg_b2_box_tl.png") left top no-repeat;
}
div.box3 {
 background:url("bg_b2_box_tr.png") right top no-repeat;
}
div.box4 {
 background:url("bg_b2_box_bl.png") left bottom no-repeat;
}
div.box5 {
 background:url("bg_b1_box_br.png") right bottom no-repeat;
}
p.content {
 color:#f5f5f5;
 padding:15px;
}
Top

type-C : 疑似要素型

C-1

コンテンツ部分
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis dolor id nisi tincidunt rutrum.

Images

bg_b1_box_tl.png (w10xh10)
bg_b1_box_tr.png (w10xh10)
bg_b1_box_bl.png (w10xh10)
bg_b1_box_br.png (w10xh10)

HTML

<div class="box">
  <p class="content">
   コンテンツ部分
  </p>
</div>

CSS

div.box {
 background-color:#5e7ea0;
 padding:10px;
 width:30em;
}
div.box:before {
 background:url("bg_b1_box_tr.png") right top no-repeat;
 content:url("bg_b1_box_tl.png");
 display:block;
 height:10px;
 font-size:1px;
 margin:-10px -10px 0 -10px;
}
div.box:after {
 background:url("bg_b1_box_br.png") right bottom no-repeat;
 content:url("bg_b1_box_bl.png");
 display:block;
 height:10px;
 font-size:1px;
 margin:-10px;
 padding-top:10px;
}
p.content {
 color:#f5f5f5;
 padding:5px;
}
Top