フリー素材|囲み枠、飾り枠-20

クリップ付きの囲み枠、飾り枠

frame20-a
htmlとcssは共通
画像は使用するものを保存してください
別の画像を使用してもOKです
▼html/css/img▼
html
<div class="box20">
<div class="icon01"></div>
ここに文字
</div>
css
.box20{
background:url(back01.gif);
box-shadow:2px 2px 5px #000;
box-sizing:border-box;
margin:20px 0; /* 中央寄せは0をautoに変更 */
padding:10px;
position:relative;
width:80%
}
.icon01 {
background:url(icon01.png) no-repeat;
height:62px;
position:absolute;
right:10px;
top:-13px;
width:27px
}
image

× close

frame20-b
frame20-c
frame20-d
background:url(back01.gif);を
background:#fff;に変更
frame20-e
background:url(back01.gif);を
background:#232327;に変更
color:#fff;を追加