CSSで虹を作る

hoge

CSSで虹を作る
hr要素で疑似ボックスを作って、それにbox-shadowで虹色のグラデーションをかける。
バックスの上辺は虹になる。可変は適当に他要素で隠すなどする。

CSS

.rainbow hr{
box-shadow :
0 0 0 15px blue,
0 0 0 30px green,
0 0 0 45px orange,
0 0 0 60px red;
height:500px;
height:800px;
background-color:transparent;
border:0;
border-top-left-radius: 50%;
-webkit-border-top-left-radius: 50%;
-moz-border-top-left-radius: 50%;
border-top-right-radius: 50%;
-webkit-border-top-right-radius: 50%;
-moz-border-top-right-radius: 50%;
}

HTML

    <div class="rainbow scroll">
    	<hr />
    </div>