プログラミング

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

Pocket

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

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

結論をメモすると。

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

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

参考サイト

Stripes in CSS

やっぱ画像でやるかという人は

ちなみに、画像をかき出してくれるサイトは

Stripe Generator – ajax diagonal stripes background designer

Pocket