0

Me pidieron un trabajo en el cual hay una área donde se muestra ciertas notificaciones, el diseño es mas o menos así, el circulo se va ir coloreando dependiendo del proceso en el que se encuentre el usuario (los estados los controlo desde la base de datos), pero no se como hacerlo, alguna recomendación o herramienta para esto?

4
  • 2
    Hola, qué es lo que no sabes hacer? el css? el js? una imagen? Si lo que necesitas js seria algo asi? kottenator.github.io/jquery-circle-progress Commented el 2 jun. 2017 a las 18:27
  • ¿que necesitas?, ¿solo los estilos?. Commented el 2 jun. 2017 a las 18:31
  • 3
    Voto para cerrar esta pregunta como tema no relacionado porque el usuario no muestra ningún avance en el trabajo que le pidieron.
    – Shaz
    Commented el 2 jun. 2017 a las 18:48
  • Puedes mostrar tu codigo actual?
    – jasilva
    Commented el 2 jun. 2017 a las 19:29

3 respuestas 3

4

Lo que puedes realizar es ponerle un border-width que sea la mitad del tamaño de tu círculo y elegir los cuatro colores que quieras para tu círculo.

Una vez hecho esto, y como se te verán en forma de "reloj de arena", tendrás que usar la función transform: rotate(45) para rotar el círculo 45 grados.

Te dejo aquí un ejemplo:

#circulo{
  position: relative;
  box-sizing: box-shadow;
  height: 200px;
  width: 200px;
  background-color: red;
  border-radius: 50%;
  box-sizing: border-box;
  border-width: 100px;
  border-style: solid;
  border-color: purple orange blue green;
  transform: rotate(45deg);
}

span{
  position: absolute;
  width: 50px;
  transform: rotate(-45deg);
}

#texto1{
   margin-left: -80px;
}

#texto2{
   top: -65px;
   left: -15px;
}

#texto3{
  left: -30px;
  top: 50px;
}

#texto4{
  top: -10px;
  left: 30px;
}
<div id="circulo">
  <span id="texto1">Texto 1</span>
  <span id="texto2">Texto 2</span>
  <span id="texto3">Texto 3</span>
  <span id="texto4">Texto 4</span>
</div>

Para poner los textos en relación al círculo puedes posicionar el círculo mediante position: relative; y cada uno de los textos posicionarlos con position: absolute; para que tomen como referencia este círculo (para posicionarlos podrás usar las propiedades top, left, bottom, right).

2
  • 3
    +1. Esta respuesta también está buena pero en este caso como quedaría el texto dentro de cada cuadrante? Commented el 2 jun. 2017 a las 18:48
  • @AdrianaHernández Estoy realizando un edit ahora mismo para mostrarlo. Dame unos minutos para actualizar la respuesta :) Commented el 2 jun. 2017 a las 18:49
3

Puedes usar un div para cada cuarto de círculo, algo parecido a esto:

	.cuarto {
		position absolute;
		width:100px;
		height:100px;
		float:left;
	}
	#cuarto1{
		background-color:blue;
		border-radius: 100% 0 0 0;
	}
	#cuarto2{
		background-color:red;
		border-radius: 0 100% 0 0;
	}
	#cuarto3{
		background-color:green;
		border-radius: 0 0 0 100%;
		clear:both;
	}
	#cuarto4{
		background-color:yellow;
		border-radius: 0 0 100px 0;
	}
<div id="cuarto1" class="cuarto"></div>
<div id="cuarto2" class="cuarto"></div>
<div id="cuarto3" class="cuarto"></div>
<div id="cuarto4" class="cuarto"></div>

Para colocar el texto, puedes usar otro div y colocarlo donde creas conveniente, o jugar con los paddings. Algo parecido a esto:

	.cuarto {
		position absolute;
		width:67px;
		height:67px;
		float:left;
	}
	#cuarto1{
		background-color:blue;
		border-radius: 100% 0 0 0;
		padding: 33px 0px 0px 33px;
	}
	#cuarto2{
		background-color:red;
		border-radius: 0 100% 0 0;
		padding: 33px 33px 0px 0px;
	}
	#cuarto3{
		background-color:green;
		border-radius: 0 0 0 100%;
		padding: 16px 0px 17px 33px;
		clear:both;
	}
	#cuarto4{
		background-color:yellow;
		border-radius: 0 0 100px 0;
		padding: 16px 33px 17px 0px;		
	}
<div id="cuarto1" class="cuarto">CV visto</div>
<div id="cuarto2" class="cuarto">Contratación</div>
<div id="cuarto3" class="cuarto">Entrevista</div>
<div id="cuarto4" class="cuarto">Entrega de papeles</div>

3
  • +1, solo como duda, si le agregas texto como queda?
    – sioesi
    Commented el 2 jun. 2017 a las 18:39
  • 1
    Sin tocar nada, en la esquina superior izquierda, fuera del cuarto, usando otro div para el texto dentro de cada cuarto, lo puedes recolocar donde convenga.. Commented el 2 jun. 2017 a las 18:42
  • +1, si pudieras agregar al ejemplo el texto de @Roberto? para ver como queda y a la vez para que el sepa como ubicarlo Commented el 2 jun. 2017 a las 18:46
0

con esto te servirá:

.box-container{
  border-radius: 50%;
  box-sizing: border-box;
  width: 300px;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
}

.box01,.box02,.box03,.box04{
  width: 150px;
  height: 150px;
  display: flex;
  box-sizing: border-box;
  padding: 40px;
}
.box01{
  background-color: red;
  justify-content: flex-end;
  align-items: flex-end;
}
.box02{
  background-color: green;
  justify-content: flex-start;
  align-items: flex-end;
}
.box03{
  background-color: blue;
  justify-content: flex-end;
  align-items: flex-start;
}
.box04{
  background-color: yellow;
  justify-content: flex-start;
  align-items: flex-start;
}
<div class="box-container">
  <div class="box01"> content </div>
  <div class="box02"> content </div>
  <div class="box03"> content </div>
  <div class="box04"> content </div>
</div>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.