They asked me for a job in which there is an area where certain notifications are shown, the design is more or less like this, the circle will be colored depending on the process the user is in (the states control them from the database), but I do not know how to do it, any recommendation or tool for this?
What you can do is put a border-width that is half the size of your circle and choose the four colors you want for your circle.
Once this is done, and as you will see it in the form of an "hourglass", you will have to use the function transform: rotate(45) to rotate the circle 45 degrees.
Here is an example:
#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> To put the texts in relation to the circle you can position the circle using position: relative; and each of the texts position them with position: absolute; so that they take this circle as a reference (to position them you can use the properties top , left , bottom , right ).
You can use a div for each quarter of a circle, something like this:
.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>To place the text, you can use another div and place it where you see fit, or play with the paddings. Something similar to this:
.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>this will help you:
.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>