CSSで文字装飾

吹き出し風1

テキスト装飾サンプル

<p class="txt01">テキスト装飾サンプル</p>
 
p.txt01{
    font-size: 30px;
    position: relative;
    padding: 0;
    display: table;
    font-weight: bold;
    color: #E8B26B;
    margin: 0 auto;
} 

p.txt01:before {
    content: "";
    width: 30px;
    display: block;
    border-bottom: 3px dotted #E8B26B;
    position: absolute;
    left: -30px;
    top: 30px;
    transform: rotate(-125deg);
}
p.txt01:after {
    content: "";
    width: 30px;
    display: block;
    border-bottom: 3px dotted #E8B26B;
    position: absolute;
    right: -30px;
    top: 30px;
    transform: rotate(125deg);
}
FacebookTwitter

コメントは受け付けていません。

関連記事

【DreamweaverCC】「取り消し」「やり直し」を開いてるソース内で行う
WEB・Wordpress 2018.02.21

【DreamweaverCC】「取り消し」「やり直し」を開いてるソース内で行う

カスタム投稿の編集画面からエディタの削除
WEB・Wordpress 2017.12.04

カスタム投稿の編集画面からエディタの削除

positionを使用した上下左右中央寄せ
WEB・Wordpress 2017.12.01

positionを使用した上下左右中央寄せ

display:flexで中央寄せ、右寄せ、均等配置
WEB・Wordpress 2018.03.17

display:flexで中央寄せ、右寄せ、均等配置

ふわふわ・生乾きの匂いのしないタオルの洗い方
WEB・Wordpress 2016.01.13

ふわふわ・生乾きの匂いのしないタオルの洗い方

カスタムタクソノミ―のURLを修正する(プラグインなし)
WEB・Wordpress 2017.12.06

カスタムタクソノミ―のURLを修正する(プラグインなし)