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

更新日 : 2021.04.04

Share
区切り線<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;
}

こちらも『線のステッチ』の応用版です。
45degで線を斜めにします。
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;
}

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

人気記事

  1. Chrome拡張機能を見直してみた

    便利なChrome拡張機能を見直してみた

  2. ジュンク堂書店池袋本店の選書フェア

    ジュンク堂書店池袋本店の選書フェアで選んだ34冊の中から9冊を紹介してみる

  3. 著書「現場で使えるWebデザインアイデアレシピ」を執筆しましたの画像

    著書「現場で使えるWebデザインアイデアレシピ」を執筆しました

  4. 2022年版 Web制作が捗るChrome拡張機能14選

    2022年版 Web制作が捗るChrome拡張機能14選

  5. 2021年を振り返る!Web制作関連の人気記事をあつめてみた