1 11
シンプル
内容
<div class="simple011">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple011{
position:relative;
padding:13px;
}
div.simple011::before{
content:"";
position:absolute;
top:0; left:0;
width:100%;
height:100%;
background-image:
url(s011_01.png),url(s011_02.png),
url(s011_03.png),url(s011_04.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top center,center right,left center,bottom center;
}
div.simple011 .waku_content{
background-color:white;
border:solid 1px black;
border-radius:20px;
padding:22px;
}
div.simple011 .waku_content2{
min-height:100px;
}
ダウンロードしました。
内容
<div class="simple012">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple012{
position:relative;
background-color:white;
padding:10px;
background-clip:content-box;
}
div.simple012::before{
box-sizing:border-box;
content:"";
position:absolute;
top:0;
left:26px;
width:calc(100% - 51px);
height:100%;
background-image:url(s012_05.png),url(s012_06.png);
background-repeat:repeat-x,repeat-x;
background-position:top left,bottom left;
}
div.simple012::after{
box-sizing:border-box;
content:"";
position:absolute;
top:30px; left:0;
width:100%;
height:calc(100% - 55px);
background-image:url(s012_07.png),url(s012_08.png);
background-repeat:repeat-y,repeat-y;
background-position:top left,top right;
}
div.simple012 .waku_content::before{
content:"";
width:100%;
height:100%;
position:absolute;
left:0px; top:0px;
background-image:url(s012_01.png),url(s012_02.png),url(s012_03.png),url(s012_04.png);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;
background-position:top left,top right,bottom left,bottom right;
}
div.simple012 .waku_content2{
box-sizing:border-box;
min-height:100px;
padding:20px;
}
ダウンロードしました。
内容
<div class="simple013">
<div class="waku_content">
<div class="waku_content2">
内容
</div>
</div>
</div>
div.simple013{
position:relative;
padding-top:8px;
}
div.simple013::before{
content:"";
position:absolute;
top:0; left:0;
background-image:url(s013_01.gif),url(s013_01.gif);
background-repeat:no-repeat,no-repeat;
background-position:top 0 left 20px,top 0 right 20px;
width:100%;
height:100%;
}
div.simple013 .waku_content{
position:relative;
background-color:white;
background-image:url(s013_02.gif);
background-repeat:repeat-x;
background-position:bottom left;
border:solid 1px black;
border-radius:20px 20px 0 0;
background-clip:content-box;
}
div.simple013 .waku_content2{
box-sizing:border-box;
min-height:100px;
padding:20px;
}
ダウンロードしました。
1 11