ひしもち 
最近、斜線やドットを使った装飾をCSSで実装することが何度かありましたが、実装のたびに repeating-linear-gradient や radial-gradient の扱い方で混乱したので、装飾の実装例をスニペットとしてまとめておきたいと思います。
見出しの実装デモ
斜線のアンダーライン
見出しブロックの下部に、斜線のアンダーラインを引きます。一見破線のようですが切り口がちょっと斜めになっているところがオシャレです。
斜線背景
背景に斜線を敷くパターンです。割とよくあるやつ。
斜線のマーカー
少し文字に掛かるように斜線のラインを敷いたもの。
ドットのアンダーライン
ドットの大きさや間隔も調整可能なので、いろんなバリエーションが作れます。
実装コード
下記のコードは自由にご利用いただけます！
ただし、実装に合わせて調整が必要となる前提でご利用ください。
また、先ほどの実装デモはWordPressの使用テーマと、見出しタグによる影響を受けているため、下記のコードでまるっきり同じようにはなりません。
ご了承ください。
私が普段の実装に使いやすくするために、SCSSの変数を利用して$c-main でカラー指定をしていますが、CSS で直接カラーコードを記載してももちろん大丈夫です。
斜線のアンダーライン
<p class="c-underline--stripe">斜線のアンダーライン</p>$c-main: #46b1c9;
.c-underline--stripe {
padding: 0 .25em .25em;
background-image: repeating-linear-gradient(
-45deg,
$c-main,
$c-main 4px,
transparent 4px,
transparent 8px
);
background-position: center bottom;
background-repeat: repeat-x;
background-size: auto 2px;
}コードの補足
background-image: repeating-linear-gradient(
-45deg,
$c-main,
$c-main 4px,
transparent 4px,
transparent 8px
);repeating-linear-gradient の数値を変更すれば、下線の横幅を調整できます。
transparent の箇所にも色を指定すると、2色カラーの縞模様になってかわいいです。
background-size: auto 2px;background-size の高さを変更すれば、下線の縦幅を調整できます。
<p><span class="c-underline--stripe">斜線のアンダーライン</span>アンダーラインのないテキストアンダーラインのないテキスト</p>見出しブロックの下線としてではなく、部分的な装飾として使用したい場合は span で囲ってクラスをつけるといいです。改行にも対応できます。
斜線背景
<p class="c-bg--stripe">斜線背景</p>$c-main: #46b1c9;
.c-bg--stripe {
padding: .25em;
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
rgba($c-main, .25) 4px,
rgba($c-main, .25) 8px
);
}コードの補足
background-image: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
rgba($c-main, .25) 4px,
rgba($c-main, .25) 8px
);変数とrgba を組み合わせて、背景として使用できるように色を薄めています。
文字色や、ベース背景との兼ね合いがあると思うので、この辺りは実装に合わせて調整が必要です。
数値を変更すると、斜線の幅を調整できます。
transparent の箇所にも色を指定すると、2色カラーの縞模様になってかわいいです。
斜線のマーカー
<p class="c-marker--stripe">斜線のマーカー</p>$c-main: #46b1c9;
.c-marker--stripe {
padding: 0 .25em .25em;
background-image: repeating-linear-gradient(
-45deg,
rgba($c-main, .25),
rgba($c-main, .25) 4px,
transparent 4px,
transparent 8px
);
background-position: center bottom;
background-repeat: repeat-x;
background-size: auto .75em;
}コードの補足
コードは斜線のアンダーラインと同じ仕組みでできていて、数値をちょっと変更しただけです。
background-image: repeating-linear-gradient(
-45deg,
rgba($c-main, .25),
rgba($c-main, .25) 4px,
transparent 4px,
transparent 8px
);こちらも、変数とrgba を組み合わせて、背景として使用できるように色を薄めています。
文字色や、ベース背景との兼ね合いで調整が必要です。
数値を変更すると、斜線の幅を調整できます。
transparent の箇所にも色を指定すると、2色カラーの縞模様になってかわいいです！
background-size: auto .75em; backgroun-size の高さを変更すると、マーカー部分の縦幅が変わります。
<p><span class="c-underline--stripe">斜線のマーカー</span>マーカーのないテキストマーカーのないテキスト</p>ブロック全体に対してではなく、テキストに対する部分的な装飾として使用したい場合は span で囲ってクラスをつけるといいです。改行にも対応できます。
ドットのアンダーライン
<p class="c-underline--dot">ドットのアンダーライン</p>$c-main: #46b1c9;
.c-underline--dot {
padding-bottom: .5em;
background-image: radial-gradient(
circle at 3px center,
$c-main,
$c-main 3px,
transparent 3px,
transparent 100%
);
background-position: center bottom;
background-repeat: repeat-x;
background-size: 16px 6px;
}コードの補足
ちょっと扱いが難しいです……汎用性の高い実装方法を模索中。
background-image: radial-gradient(
circle at 3px center,
$c-main,
$c-main 3px,
transparent 3px,
transparent 100%
);$c-main 3px とありますが、この数値がドットの半径になります。
数値を調整するとドットのサイズを変更できます。
前後しますが、circle at 3px center では円の中心点を指定するので、円の半径分（この場合は3px）内側へずらす指定をしています。
ドットのサイズを変更した場合はこちらも併せて変更する必要があります。
background-size: 16px 6px;background-size の横幅が、ドットの間隔になります。縦幅はドットの直径に合わせておきます。
このままではブロックの下線にしかなりません。
background-repeat を repeat にして、background-size の縦幅をいい感じにすると、ちょうど文字幅に合うドット罫線のノートみたいにもできそうな気がしているのですが、数値を細かく調整するような方法しか見つけられず、汎用性が確保できてないので今回は載せません。
どなたかスマートなやりかたを思いついたらぜひ教えてください。