【CSSで】おまえのサイトを虹色に染めて【虹を描け】

HTML5とCSS3講座。グラデーションでボーダー模様が作れますが、さらに突っ込んでレインボーカラーを作ってみました。
見本とソースコードはこちら。

【HTML】

<div class="rainbow_box5px">
<div class="rainbow_box">
ここにテキスト
</div>
</div>

【CSS】

.rainbow_box5px {
width: 100%;
margin: 0;
padding: 5px;
height: 100px;
background: repeating-linear-gradient(-45deg,
#e60033 , #e60033 5px,
#fff 5px, #fff 10px, #f08300 10px, #f08300 15px,
#fff 15px, #fff 20px, #ffd900 20px, #ffd900 25px,
#fff 25px, #fff 30px, #3eb370 30px, #3eb370 35px,
#fff 35px, #fff 40px, #bce2e8 40px, #bce2e8 45px,
#fff 45px, #fff 50px, #0095d9 50px, #0095d9 55px,
#fff 55px, #fff 60px, #884898 60px, #884898 65px,
#fff 65px, #fff 70px);
box-shadow: 0 1px 4px #9ea1a3;
}
.rainbow_box {
width: auto;
margin: 5px;
padding: 20px;
height: 40px;
border: 5px solid #ffd900;
background-color: hsla(0,0%,100%,1.0);
}

backgroundなげぇよ。

色ですが、

赤　橙　黄　緑　水　青　紫

の順番。色も順番も基本の虹色に白をサンドしてあります。

『7色もいらねぇ』という場合は、単純に数を減らせばいいだけです。
色や太さを変えたい時は、『開始の色は赤。赤を5pxまで使用。次は白を5pxから開始。その白は10pxまで使用。その次は橙を10pxから開始。その橙は15pxまで……』といった具合に、
人間語に訳してみるとどこをどう書き換えればいいのかわかると思います。つか、自分もそれでようやくわかったんよ……

線の太さは5px。45度斜めに傾けて、横100%、高さ100pxのボックスを作り、その上に黄色い縁取りの白いボックスを重ねた感じです。（縁取りはあってもなくても）
ちなみに虹ボックスに『box-shadow』つけてますが、これも好みで消すなりなんなりご自由に。

pxをいじれば、色の太さも自由自在です。見出しとかにいかがでしょう？　私は使いませんが。（派手すぎ）

見出し枠じゃなくても、背景色にもつかえるぞ！　（目に厳しい）

さて、これの太さや角度を変更して、区切り線も作ってみました。こっちのほうが使い道あるかな？

太さ3pxから意味もなく20pxまで作ってみた。細いほうが使い勝手いいかな？
角度を『-45deg』から『90deg』にすれば正方形が並んだ区切りに。この辺は好みでカスタマイズしてください。（サンプルは90度と-45度を交互）

使い所はおまいらの創意工夫に託すぜ！

【HTML】（太さに合わせて数字を変更してネ★）

<hr class="rainbow3px">

【CSS】（縦・斜めはお好みで書き換えてネ★）

/* 3px */
.rainbow3px {
width: 100%;
height: 3px;
margin: 0;
padding: 0;
border: 0;
background: repeating-linear-gradient(90deg,
#e60033 , #e60033 3px,
#fff 3px, #fff 6px, #f08300 6px, #f08300 9px,
#fff 9px, #fff 12px, #ffd900 12px, #ffd900 15px,
#fff 15px, #fff 18px, #3eb370 18px, #3eb370 21px,
#fff 21px, #fff 24px, #bce2e8 24px, #bce2e8 27px,
#fff 27px, #fff 30px, #0095d9 30px, #0095d9 33px,
#fff 33px, #fff 36px, #884898 36px, #884898 39px,
#fff 39px, #fff 42px);
} 

/* 5px */
.rainbow5px {
width: 100%;
height: 5px;
border: 0;
background: repeating-linear-gradient(-45deg,
#e60033 , #e60033 5px,
#fff 5px, #fff 10px, #f08300 10px, #f08300 15px,
#fff 15px, #fff 20px, #ffd900 20px, #ffd900 25px,
#fff 25px, #fff 30px, #3eb370 30px, #3eb370 35px,
#fff 35px, #fff 40px, #bce2e8 40px, #bce2e8 45px,
#fff 45px, #fff 50px, #0095d9 50px, #0095d9 55px,
#fff 55px, #fff 60px, #884898 60px, #884898 65px,
#fff 65px, #fff 70px);
}

/* 10px */
.rainbow10px {
width: 100%;
height: 10px;
border: 0;
background: repeating-linear-gradient(90deg,
#e60033 , #e60033 10px,
#fff 10px, #fff 20px, #f08300 20px, #f08300 30px,
#fff 30px, #fff 40px, #ffd900 40px, #ffd900 50px,
#fff 50px, #fff 60px, #3eb370 60px, #3eb370 70px,
#fff 70px, #fff 80px, #bce2e8 80px, #bce2e8 90px,
#fff 90px, #fff 100px, #0095d9 100px, #0095d9 110px,
#fff 110px, #fff 120px, #884898 120px, #884898 130px,
#fff 130px, #fff 140px);
}

/* 15px */
.rainbow15px {
width: 100%;
height: 15px;
border: 0;
background: repeating-linear-gradient(-45deg,
#e60033 , #e60033 15px,
#fff 15px, #fff 30px, #f08300 30px, #f08300 45px,
#fff 45px, #fff 60px, #ffd900 60px, #ffd900 75px,
#fff 75px, #fff 90px, #3eb370 90px, #3eb370 105px,
#fff 105px, #fff 120px, #bce2e8 120px, #bce2e8 135px,
#fff 135px, #fff 150px, #0095d9 150px, #0095d9 165px,
#fff 165px, #fff 180px, #884898 180px, #884898 195px,
#fff 195px, #fff 210px);
}

/* 20px */
.rainbow20px {
width: 100%;
height: 20px;
border: 0;
background: repeating-linear-gradient(90deg,
#e60033 , #e60033 20px,
#fff 20px, #fff 40px, #f08300 40px, #f08300 60px,
#fff 60px, #fff 80px, #ffd900 80px, #ffd900 100px,
#fff 100px, #fff 120px, #3eb370 120px, #3eb370 140px,
#fff 140px, #fff 160px, #bce2e8 160px, #bce2e8 180px,
#fff 180px, #fff 200px, #0095d9 200px, #0095d9 220px,
#fff 220px, #fff 240px, #884898 240px, #884898 260px,
#fff 260px, #fff 280px);
}

派手だと思うなら、パステルカラーに変えるのはいかがでしょう？（見本は線の太さ20px）

/* パステルカラー */
.rainbow20px_pastel {
width: 100%;
height: 20px;
border: 0;
background: repeating-linear-gradient(-45deg,
#ffc6c6 , #ffc6c6 20px,
#fff 20px, #fff 40px, #ffe2c6 40px, #ffe2c6 60px,
#fff 60px, #fff 80px, #ffffc6 80px, #ffffc6 100px,
#fff 100px, #fff 120px, #c6ffc6 120px, #c6ffc6 140px,
#fff 140px, #fff 160px, #c6ffff 160px, #c6ffff 180px,
#fff 180px, #fff 200px, #c6e2ff 200px, #c6e2ff 220px,
#fff 220px, #fff 240px, #e2c6ff 240px, #e2c6ff 260px,
#fff 260px, #fff 280px);
}

色つき背景の上に置きたいという場合は、グラデーションのとこの『#fff』を『hsla(0,0%,0%,0.00)』に置き換えればOK。

これでおまいらのサイトがちょっとカラフルになるぞ！
あと計算めっちゃめんどかった！　（※ただの足し算）