Pregunta CSS: círculo con cuatro colores y solo un div


¿Es posible crear un círculo con cuatro colores diferentes (uno para cada trimestre) usando CSS puro? Quiero algo como uno de estos cuatro círculos:

[Desafortunadamente, la imagen a la que me he vinculado ya no existe. Por favor, mira las respuestas para entender el efecto que tenía después]

Puedo imaginarme usando una solución con cuatro divs y border-radius, ¿pero es posible usar solo un div y algunos css3?


10
2017-07-13 12:47


origen


Respuestas:


Como ha enumerado CSS3, puede hacer esto solo con bordes y una transformación de rotación para "corregir" la alineación:

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);
}

http://jsfiddle.net/k8Jj9/


13
2017-07-13 13:50



El CSS sería:

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;
}

manifestación

Y con el radio de la frontera:

demo 2

Metodo alternativo

.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;
}

En la línea de las imágenes OP, donde los círculos tienen diferentes tonos del mismo color, existe la posibilidad de definir una clase que establece superposiciones sobre la div base, ambas semitransparencias. Una vez definida esa clase, puede aplicarla fácilmente a diferentes elementos de color, obteniendo el mismo efecto sin esfuerzo

Demo 3


10
2017-07-13 13:33



Qué tal esto:

http://jsbin.com/uletik/1/edit

Solo un 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;
}

3
2017-07-13 13:21