フリー素材｜画像を使用しない囲み枠、飾り枠-06

ドッグイヤーの囲み枠、飾り枠

色や大きさはお好みで設定してください
s_box51
▼html/css▼
html
<div class="s_box51">
ここに文字
</div>
css
.s_box51 {
background:#e43084;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box51::after {
border-color:#000 #000 #fff #fff;
border-style:solid;
border-width:0 10px 10px 0;
box-shadow:-1px 1px 2px rgba(0,0,0,.1);
content:'';
position:absolute;
right:0;
top:0;
width:0
}
× close
s_box51-b
▼html/css▼
html
<div class="s_box51">
ここに文字
</div>
css
.s_box51 {
background:#dadada;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box51::after {
border-color:#666 #666 #fff #fff;
border-style:solid;
border-width:0 10px 10px 0;
box-shadow:-1px 1px 2px rgba(0,0,0,.1);
content:'';
position:absolute;
right:0;
top:0;
width:0
}
× close
s_box51-c
▼html/css▼
html
<div class="s_box51">
ここに文字
</div>
css
.s_box51 {
background:#cbfefe;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box51::after {
border-color:#fff #fff #2bf0fa #2bf0fa;
border-style:solid;
border-width:0 10px 10px 0;
box-shadow:-1px 1px 2px rgba(0,0,0,.1);
content:'';
position:absolute;
right:0;
top:0;
width:0
}
× close
s_box52
▼html/css▼
html
<div class="s_box52">
ここに文字
</div>
css
.s_box52 {
background-color:#fff;
background-image:repeating-linear-gradient(45deg, transparent, transparent 6px, #facfdd 6px, #facfdd 12px );
background-size:auto auto;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box52::after {
border-color:#fff #fff #e43084 #e43084;
border-style:solid;
border-width:0 20px 20px 0;
box-shadow:-1px 1px 2px rgba(0,0,0,.1);
content:'';
position:absolute;
right:0;
top:0;
width:0
}
× close
s_box52-b
▼html/css▼
html
<div class="s_box52">
ここに文字
</div>
css
.s_box52 {
background-color:#fff;
background-image:repeating-linear-gradient(45deg, transparent, transparent 6px, #dadada 6px, #dadada 12px );
background-size:auto auto;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box52::after {
border-color:#fff #fff #999 #999;
border-style:solid;
border-width:0 20px 20px 0;
box-shadow:-1px 1px 2px rgba(0,0,0,.1);
content:'';
position:absolute;
right:0;
top:0;
width:0
}
× close
s_box52-c
▼html/css▼
html
<div class="s_box52">
ここに文字
</div>
css
.s_box52 {
background-color:#fff;
background-image:repeating-linear-gradient(45deg, transparent, transparent 6px, #cbfefe 6px, #cbfefe 12px );
background-size:auto auto;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box52::after {
border-color:#fff #fff #2bf0fa #2bf0fa;
border-style:solid;
border-width:0 20px 20px 0;
box-shadow:-1px 1px 2px rgba(0,0,0,.1);
content:'';
position:absolute;
right:0;
top:0;
width:0
}
× close
▼指定の説明▼
.samplecss {
background-color:#fff;
  /* 背景色 */
background-image:repeating-linear-gradient(45deg, transparent, transparent 6px, #cbfefe 6px, #cbfefe 12px );
  /* 斜め線の太さと色 */
margin:1em 0;
  /* 中央寄せは0をautoに変更 */
}
.samplecss::after {
border-color:#fff #fff #2bf0fa #2bf0fa}
  /* 右上の色 最初の2つを背景色と同じにすると折れて見えます */
WEB拍手