cssで斜めボーダーを簡単に実装しちゃうブログ

cssで
斜めボーダーを
簡単に
実装しちゃうブログこの背景もcss！

こんにちは、プロクラスの渡辺です。

突然ですが、私はパターンを作成するのが壊滅的に苦手でして、本当にできるのなら使いたくないとさえおもうくらいには苦手なんですが、そんなことも言ってられない今日この頃です。

ただの縦ボーダー、横ボーダーくらいなら作れるんですけど、それ以外は全くダメ、でも今そのパターンを作るのに時間をかけてる場合じゃない!!ってときに
今ならcssでできるパターン背景もあるんじゃ…？
と思い至りまして、見事に再現してくれたので備忘録として残しておきたいと思います～！

今回は、黄色と白のボーダーにしてみました！


.border {
    background-color: #ffec6f;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff),
color-stop(.25, transparent),color-stop(.5, transparent),
color-stop(.5, #fff),color-stop(.75, #fff), 
color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;
    margin: 2% auto 5%;
    padding: 2% 0;
}

これだけで！斜めのボーダーができちゃうんです！もう私にとっては救世主…ありがとう～～！！
簡単に色も変更できるのでいろんなボーダーが使えますね！
簡単なんで説明するほどでもないんですけど、忘れてしまった未来の私のためにきちんと記録を残しておこうと思います！

色を変えたいときはここ！


.border {
    background-color: #ffec6f;
    /*ここでは黄色を背景にしています。*/

今回なぜ黄色を背景にしたかというと、このcssが効かないブラウザがあった場合、白だと締まりのないページになってしまうので、もしものために黄色を背景にしました。


background-image: -webkit-gradient(linear, 0 0, 100% 100%,color-stop(.25, #fff),
color-stop(.25, transparent),color-stop(.5, transparent),
color-stop(.5, #fff),color-stop(.75, #fff), 
color-stop(.75, transparent),to(transparent));
    -webkit-background-size: 7px 7px;
/*白のボーダーをこのcssで作っています。*/

背景を黄色にしたのでボーダーの白を作りました。今[#fff]になってるところを赤色にしたら某ファストフード店みたいな色合いも簡単にできちゃいます！

ちなみに、太さを変えたいときはここの数値を変えてあげます!