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

吹き出しの囲み枠、飾り枠

色や大きさはお好みで設定してください
s_box31
▼html/css▼
html
<div class="s_box31">
ここに文字
</div>
css
.s_box31{
background:#ffc4c4;
border-radius:6px;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box31::after{
border:8px solid transparent;
border-top:8px solid #ffc4c4;
content:'';
left:30px; /* 三角の位置 */
position:absolute;
top:100%
}
× close
s_box32
▼html/css▼
html
<div class="s_box32">
ここに文字
</div>
css
.s_box32{
background:#fff;
border:2px solid #ffc4c4;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box32::before,.s_box32::after{
border:8px solid transparent;
content:'';
left:30px; /* 三角の位置 */
position:absolute;
top:100%
}
.s_box32::before{
border-top:8px solid #ffc4c4
}
.s_box32::after{
border-top:8px solid #fff;
margin-top:-3px
}
× close
s_box33
▼html/css▼
html
<div class="s_box33">
ここに文字
</div>
css
.s_box33{
background:#ffc4c4;
border:2px solid #2b1408;
box-sizing:border-box;
margin:1em 0; /* 中央寄せは0をautoに変更 */
padding:1em;
position:relative;
width:80%
}
.s_box33::before,.s_box33::after{
border:8px solid transparent;
content:'';
left:30px; /* 三角の位置 */
position:absolute;
top:100%
}
.s_box33::before{
border-top:8px solid #2b1408
}
.s_box33::after{
border-top:8px solid #ffc4c4;
margin-top:-3px
}
× close

カスタマイズサンプル

#ffc4c4を#c0c0c0に変更
三角を中央に変更
left:30px;をright:30px に変更
border-radius:6px;を追加
border-radius:6px;を追加
▼指定の説明▼
.samplecss {
background:#ffc4c4; /* 背景色 */
border-radius:6px; /* 角の丸み */
margin:1em 0; /* 中央寄せは0をautoに変更 */
}
.samplecss::after {
border:8px solid transparent;
border-top:8px solid #ffc4c4;
content:'';
left:30px; /* 三角の位置 */
}
三角を中央にする場合は 
left:50%;
に変更 
margin-left:-8px;
を追加してみてください
WEB拍手