単純なボーダーストライプ柄はCSSでやるときのまとめメモ

CSS3だけで単純なストライプ柄はさっと作れないかなと思い検索したらかなり簡単にできるようでした。

単純ボーダーパターンのCSS
やっぱ画像でやるかという人は

単純ボーダーパターンのCSS

結論をメモすると。

background: repeating-linear-gradient(
-45deg,
#fff,
#fff 4px,
#cb5d5d 4px,
$cb5d5d 8px
);

4 + 4 = 8 ? のようにすれば良いみたい。（ちゃんと調べてないので　調べるくらい難しくするなら画像でやればいいかなって感じ今は。。。)
このやり方の注意点は
– 50:50にしないといけない
– あまりにも小さいパターンだとずれる
という感じ、
細かくする場合はグラデーションを%できれいに区切りボーダーを描画するようです。
手間かけないでパッとやってしまいたいときはこれでいいかなって感じ。