#1 css conical gradient

/! \ -webkit- ONLY

by toubia95

HTML

<ul>
    <li class="rouge"><span class="d d-rouge"></span></li>
    <li class="orange"><span class="d d-orange"></span></li>
    <li class="jaune"><span class="d d-jaune"></span></li>
    <li class="vert"><span class="d d-vert"></span></li>
    <li class="bleu"><span class="d d-bleu"></span></li>
    <li class="violet"><span class="d d-violet"></span></li>
</ul>

CSS

body {
    padding:50px;
}
ul {
    position: relative;
    padding:0;
    margin:0;
}
ul li {
    display: block;
    width: 50px;
    height: 50px;
    position:absolute;
}

.d-rouge {
    display: block;
    width: 60px;
    height: 60px;    
    -webkit-transform:perspective(60) rotateX(-49deg);
    background: -webkit-linear-gradient(left, red, orange);
}

.rouge {
    -webkit-transform:rotate(30deg);
    left: 100px;
}

.d-orange {
    display: block;
    width: 60px;
    height: 60px; 
    -webkit-transform:perspective(60) rotateX(-49deg);
    background: -webkit-linear-gradient(left, orange, yellow);
}

.orange {
    -webkit-transform:rotate(90deg);
    left: 132px;
    top: 47px;
}

.d-jaune {
    display: block;
    width: 60px;
    height: 60px;    
    -webkit-transform:perspective(60) rotateX(-49deg);
    background: -webkit-linear-gradient(left, yellow, green);
}

.jaune {
    -webkit-transform:rotate(150deg);
    left: 108px;
    top: 101px;
}