linear-gradient-deg!

by redky

HTML

<div class="box r" data-deg="default"></div>

CSS

.box {
    float: left;
    height: 100px;
    width: 100px;
    margin: 20px;
}

.box:nth-child(2),
.box:nth-child(4n+6){
    clear: left;  
}

.box:after {
    content: attr(data-deg);
    display: block;
    padding-top: 100%;
    text-align: center;
    color: #666;
}

.r {
    background: -webkit-linear-gradient(#aaa, #000);
}

JavaScript

var body = document.getElementsByTagName( 'body' )[0];
var fragment = document.createDocumentFragment();
var deg = 0;
var i = 0;
var r = [ 30, 15, 15, 30 ];
var box;
while ( deg <= 360 ) {
    box = document.createElement( 'div' );
    box.setAttribute( 'class', 'box r' + deg );
    box.dataset.deg = deg + 'deg';
    var style = '-webkit-linear-gradient(' + deg + 'deg, #aaa, #000)';
    box.style.background = style;
    fragment.appendChild( box );
    deg += r[i++];
    i = i === 4 ? 0 : i;
}
body.appendChild( fragment );