linear-gradientでストライプじゃなくて斜線を作る方法【CSS de 幾何学模様】

背景などでいつもお世話になっているCSSグラデーション（linear-gradient）。他にもいろいろな模様を描くことができます。そのなかでも「ストライプ（縞模様）」はよく知られています。これを応用して「斜線」を作れないかなー、と試行錯誤してみました。「CSS de 幾何学模様」シリーズ開幕です。

※目次：

背景などでお世話になっているCSSグラデーション
2箇所を同色にするとクッキリとした縞模様（ストライプ）に
degで45度傾ける
パーセントの位置を偏らせてストライプを斜線にする
課題：半端な角度だと綺麗な斜線にならない。。
最後に

※参考：CSSって何？【HTML、CSS、JSの書式】これを読めばコードが読める！書ける！まとめ！（基本5+応用1記事） - クモのようにコツコツと

背景などでお世話になっているCSSグラデーション

これが生まれる前はグラデーションはビットマップ画像で表現していました。スマホ時代には可変背景が多いので、画像は厳しいっす。メインビジュアルや見出し、ボタンなどのちょっとしたグラデに助けられています！（グラデは開始色と終了色をあまり強烈にすると人工的な感じになるので控えめにw）

#hoge {
    background: linear-gradient(
    #fff,
    #55cc33 70%,
    #337A1F
    );
}

backgroundプロパティの値をCSS関数linear-gradient()に
開始色は#FFF（白）
中間色70%の位置は#55cc33（緑）
終了色は#337A1F（深緑）

こうなります。

中間色は色名だけ入れると50%の位置の色になります。パーセンテージを入れることで位置をズラすことができます。中間色を何色もいれた場合も初期値では均等に割り振られますがパーセンテージを入れると自由な位置に指定できます。

2箇所を同色にするとクッキリとした縞模様（ストライプ）に

次、縞模様（ストライプ）に挑戦！

#hoge {
background: linear-gradient(
    #fff,
    #fff 25%,
    #55cc33 25%,
    #55cc33 50%,
    #fff 50%,
    #fff 75%,
    #55cc33 75%,
    #55cc33
    );
}

開始色〜25%まで#fff（白）
25%〜50%まで#55cc33（緑）
50%〜75%まで#fff（白）
75%〜終了色まで#55cc33（緑）

今度は2つずつ同じ色を書いて、パーセンテージは色の変わり目を同じ数値にしました。*1すると…なんということでしょう？

色の変わり目がクッキリして綺麗なストライプになりました！グラデってジンワリじゃなくてクッキリした表現もできるんですね！

degで45度傾ける

今度はlinear-gradient()の設定値degを使って45度傾けてみます。

#hoge {
background: linear-gradient(
    -45deg,
    #fff,
    #fff 25%,
    #55cc33 25%,
    #55cc33 50%,
    #fff 50%,
    #fff 75%,
    #55cc33 75%,
    #55cc33
    );
}

-45degで左側に45度傾ける

傾いた！

ちなみにマイナスを取ると右側に傾きます。

パーセントの位置を偏らせてストライプを斜線にする

これまでは2色の線の太さが均等でしたが、これを片方を太く、片方を細くしてみたい。太い方を白にすれば斜線になるはず…。

#hoge {
    background: linear-gradient(
    -45deg,
    #fff,
    #fff 45%,
    #55cc33 45%,
    #55cc33 50%,
    #fff 50%,
    #fff 95%,
    #55cc33 95%,
    #55cc33
    );
}

開始色〜45%まで#fff（白）
45%〜50%まで#55cc33（緑）
50%〜95%まで#fff（白）
95%〜終了色まで#55cc33（緑）

一見ではわかりにくいですよね？1色目と3色目は45%の幅に対して2色目と4色目の幅は5%しかありません。4色の合計は100%になります。すると…

斜線になりました！均等な縞模様だけでなく、こういうのを背景にしたいときもありますよね？なお、-45degを削除すれば傾きは水平になります。90度にしたら垂直です。

課題：半端な角度だと綺麗な斜線にならない。。

と、よろこんでいたのもつかの間、０、45、90など綺麗な角度はいいんだけど半端な角度にするとどうもきれいな斜線になってくれません…

#hoge {
  margin: 0 auto;
    background: linear-gradient(
    -60deg,
    #fff,
    #fff 45%,
    #55cc33 45%,
    #55cc33 50%,
    #fff 50%,
    #fff 95%,
    #55cc33 95%,
    #55cc33
    );
}

こちらは60度（-60deg）にした例です。

むむむ？なんじゃこりゃあ…！

CSSグラデ以外の部分のコードは下記となります。

#shasen {
    width: 300px;
    height: 300px;
    margin: 0 auto;  /*左右は中央寄せに*/
    background: linear-gradient( 
    /*（中略：上と同じ）*/
    );
    background-size:  30px; /*背景サイズ*/
}

幅300px、高さ300pxの正方形ボックス
background-sizeで背景サイズ30pxに（ボックスの1/10のサイズ）

CSSグラデーションは背景の1/10サイズで繰り返していいます。この繰り返しが正方形だと60度の角度がうまく繰り返されません。

background-sizeを打ち替えてみる。

#shasen {
    width: 300px;
    height: 300px;
    margin: 0 auto;  /*左右は中央寄せに*/
    background: linear-gradient(
    /*（中略：上と同じ）*/
    );
    background-size:  17px 30px; /*背景サイズ*/
}