Wazap! Blog - ワザップ!ブログ

■DEMO

■用意した画像

*実際のサイズは1600X50になります。

■HTML

Top



Body



Bottom

■CSS

div#square{
width:200px;
font-size:12pt;
}

div#square p{
margin:0;
padding:5px;
line-height:1.4em;
}

#squareTop {
background:url(img/bgSquare.gif) no-repeat 100% 0;
margin-left:4px; /* 角丸の半径に合わせて変わる */
}

#squareTop div {
width:100%;
position:relative;
left:-4px; /* 角丸の半径に合わせて変わる */
background:url(img/bgSquare.gif) no-repeat 0 0;
}

div#squareBody {
border-width:0 1px;
border-color:#8a8989;
border-style:solid;
}

div#squareBot {
background:url(img/bgSquare.gif) no-repeat 100% 100%;
margin-left:4px; /* 角丸の半径に合わせて変わる */
}

div#squareBot div {
width:100%;
position:relative;
left:-4px; /* 角丸の半径に合わせて変わる */
background:url(img/bgSquare.gif) no-repeat 0 100%;
}