CSSで斜めストライプを作る

CSSを使用して斜めストライプを作る方法について解説します。
見出しや背景などにシームレスな斜線を入れたい場合などに活用できます。
いちいち画像を用意する手間もなく、画質を気にする必要もないので便利です。

CSSで斜めストライプを作る方法

CSSで斜めストライプを作るにはグラデーションを利用します。
例としてrepeating-linear-gradient()というプロパティで実現します。

.stripe { 
    background-image: repeating-linear-gradient( -45deg, #CFDFE4, #CFDFE4 3px, transparent 3px, transparent 6px);
}

※作成中です。近日追記予定。