CSSのみでステッチ風の区切り線を実装する

区切り線<hr>をCSSでステッチ風にデザインする方法です。少ないコードで自然な装飾が実装できるのでおすすめです。

線のステッチ

hr {
	border: 0;
	height: 8px;
	background-image: repeating-linear-gradient(90deg, #777 0px, #777 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4px);
}

反復線形グラデーションrepeating-linear-gradientで繰り返し線を作成します。

グラデーションの向きのデフォルト（0deg）が上から下へなので、90degを指定して左から右へ流れるように設定します。

#777 0px, #777 1px,で線の色を#777777に指定、線の幅を1pxに指定しています。
rgba(0,0,0,0) 1px, rgba(0,0,0,0) 4pxで1pxの位置から4pxの位置まで透明rgba(0,0,0,0)にしています。

これを反復線形グラデーションrepeating-linear-gradientで線をリピートさせて表示させます。

ドットステッチ

hr {
	border: 0;
	height: 2px;
	background-image: repeating-linear-gradient(90deg, #777 0px, #777 4px, rgba(0,0,0,0) 4px, rgba(0,0,0,0) 12px);
}

先ほどの『線のステッチ』の応用版です。
同じようにrepeating-linear-gradientを使用して繰り返し表示させます。
height: 2px;と、線の幅、透明部分の幅を変えるだけで印象を変えることができます。

斜線ステッチ

hr {
	border: 0;
	height: 8px;
	background-image: repeating-linear-gradient(45deg, #777 0px, #777 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}

こちらも『線のステッチ』の応用版です。
４５degで線を斜めにします。
background-size: 8px 8px;で8pxと8pxのボックスの中に背景（ここでは斜線）を描写するように指定。#777 0px, #777 1pxで線、rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%で透明にします。これを反復線形グラデーションrepeating-linear-gradientで線をリピートさせて表示させます。

網掛け線ステッチ

hr {
	border: 0;
	height: 8px;
	background-image:
		repeating-linear-gradient(45deg, #777 0px, #777 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%),
		repeating-linear-gradient(135deg, #777 0px, #777 1px, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%);
	background-size: 8px 8px;
}

こちらも『斜線のステッチ』の応用版です。
対角の斜線を追加することで網掛けにしています。