ポイント / 三点ドット

大きいサイズ

小さいサイズ

見出しテンプレート

見出し

見出しサンプル

css

<h1 class="caption">見出し文字</h1>

css

.caption::before{
    background: url(画像URL) no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 1.3em;
    transform: rotate(-20deg);
    width: 1em;
}



見出し2
見出しサンプル


css
<h1 class="caption">見出し文字</h1>


css
.caption{
    background: #e86a81;
    color: #fff;
    display: table;
    padding: 0 .3em;
}

.caption::before , .caption::after{
    background: url(画像URL) no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 1.3em;
    margin-bottom: -.26em;
    width: 1em;
}

.caption::after{
    transform: rotate(180deg);
}


ボックステンプレート
ボックス
ボックスサンプル


html
<div class="box">ボックスサンプル</div>


css
.box{
    background: url(画像URL) repeat-y;
    border:  solid 1px #000;
    padding-left: 40px;
}