サイト内検索
...タグ・小技・etc...
ボックス
外角丸・内角丸のボックス
[サンプル]
外角丸・内角丸ボックスのサンプル
[メモ]
上辺(紫)・下辺の色(紫)左右のborderの色(グリーン)
角を削る色(黒)を揃えると
画像を使用しないで、外角丸・内角丸のボックスを作ることができます。
外角丸のボックスについては、こちらをご覧ください。
外角丸・内角のボックスのボックスについては、こちら
をご覧ください。
Leoーnet
サンプルのソース
[スタイルシート]
/* ----------------- 左右の線・グリーン*/.sen{
border-left: 4px solid #bde3a6;
border-right: 4px solid #bde3a6;
}
/* ----------------- サイズ */
.sample{
width: 400px;
}
/* ----------------- テキスト欄の高さ ・白色*/
.sample p{
margin:0px;
padding:0.5em 1em;
background-color: #ffffff;
height: 100px;
}
/* ----------------- 上辺・下辺の色・紫 */
.kadotop span, .kadobottom span{
display:block;
height:1px;
overflow:hidden;
background-color: #c8a1f0;
}
/* ----------------- 外角を削る色・白色*/
.kadotop, .kadobottom{
background: #ffffff;
}
/* ----------------- 外角*/
.kado1{margin: 0px 5px;}
.kado2{margin: 0px 3px;}
.kado3{margin: 0px 2px;}
.kado4{margin: 0px 1px; height: 2px;}
/* ----------------- 内側の上辺・内側の下辺の色・白色 */
.kadotop2 span, .kadobottom2 span{
display:block;
height:1px;
overflow:hidden;
background-color: #ffffff;
}
/* ----------------- 内角を削る・黒色 */
.kadotop2, .kadobottom2{
background: #000000;
}
/* ----------------- 内角*/
.kado5{margin: 0px 5px;}
.kado6{margin: 0px 3px;}
.kado7{margin: 0px 2px;}
.kado8{margin: 0px 1px; height: 2px;}
[bodyの中]
<div class="sample"><div class="kadotop">
<span class="kado1"></span>
<span class="kado2"></span>
<span class="kado3"></span>
<span class="kado4"></span>
</div>
<div class="sen">
<div class="kadotop2">
<span class="kado5"></span>
<span class="kado6"></span>
<span class="kado7"></span>
<span class="kado8"></span>
</div>
外角丸・内角丸ボックスのサンプル
<div class="kadobottom2"><span class="kado8"></span>
<span class="kado7"></span>
<span class="kado6"></span>
<span class="kado5"></span>
</div>
</div>
<div class="kadobottom">
<span class="kado4"></span>
<span class="kado3"></span>
<span class="kado2"></span>
<span class="kado1"></span>
</div>
</div>