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

更新日 : 2021.04.04

Share
0
0
1
区切り線<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. 【保存版】CSSのみのボタンデザイン!私が現場で使ってきたボタンアイデア30選の画像

    【保存版】CSSのみのボタンデザイン – 私が現場で使ってきたボタンアイデア30選

  2. 現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介しますの画像

    現場で使えるFlexboxレイアウト12選。実際に使ってきたレイアウトを紹介します

  3. Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

    Web制作の現場で使えるWebサービス15選!無料で使えるサービスを集めてみた

  4. CSS見出しデザイン21スタイル - シンプルな見出しデザインをご紹介の画像

    CSS見出しデザイン21選。現場ですぐ使える見出しデザインをご紹介

  5. ボタンやテキストリンク、hoverスタイルをCSSのみで19パターン実装するの画像

    CSSのみで実装するボタン、テキストリンク、hoverスタイル19選