CSS: cercle avec quatre couleurs et une seule div
est-il possible de créer un cercle avec quatre couleurs différentes (une pour chaque quartier) en utilisant des CSS purs? Je veux quelque chose comme un de ces quatre cercles:
[Malheureusement l'image je lien n'existe plus. Veuillez voir les réponses à comprendre le l'effet que je recherchais]
je peux imaginer utiliser une solution avec quatre divs et border-radius, mais est-ce possible en utilisant seulement une div et quelques fancy css3?
3 réponses
depuis que vous avez listé CSS3, vous pouvez le faire avec juste des bordures et une transformation de rotation pour "corriger" l'alignement:
div {
border-radius: 50px;
border-style: solid;
border-width: 50px;
border-bottom-color: red;
border-left-color: green;
border-right-color: blue;
border-top-color: yellow;
height: 0px;
width: 0px;
/* To ratate */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
Le CSS serait:
div {
width: 200px;
height: 200px;
background: linear-gradient(45deg, blue, blue 100%), linear-gradient(135deg, green, green), linear-gradient(225deg, yellow, yellow) , linear-gradient(225deg, red, red);
background-size: 50% 50%;
background-position: 0% 0%, 0% 100%, 100% 0%, 100% 100%;
background-repeat: no-repeat;
}
Et avec le border radius:
méthode alternative
.quarters {
width: 101px;
height: 101px;
border-radius: 50%;
position: relative;
}
.quarters:after {
content: '';
position: absolute;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
linear-gradient(0deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));
background-size: 50% 100%, 100% 50%;
background-position: 100% 0%, 0% 100%;
background-repeat: no-repeat;
}
#red {
background-color: red;
}
#blue {
background-color: blue;
}
#green {
background-color: green;
}
#yellow {
background-color: yellow;
}
dans la ligne des images OP, où les cercles ont des teintes différentes de la même couleur, il y a la posibilité de définir une classe qui se met à superposer sur le div de base, les deux semi-parents. Une fois cette classe définie, vous pouvez facilement l'appliquer à différents éléments de couleur, obtenir le même effet sans effort
Démo 3
Que Diriez-vous de ceci:
http://jsbin.com/uletik/1/edit
juste une div.
div {
height:100px;
width:100px;
border-radius:100px;
background: -webkit-linear-gradient(left, grey, grey 50%, blue 50%, blue);
overflow:hidden;
position:relative;
}
div:after {
content:"";
height:50px;
background-color:red;
width:50px;
display:block;
}
div:before {
content:"";
background-color:green;
height:50px;
width:50px;
display:block;
right:0;
position:absolute;
}