CODEWITHSUNDEEP
css
Alejandro V.
Alejandro V.

Reputation: 26

Split a div in 3 section

I have to do a soccer team shield with css, the idea is do a circle with the team colors and I have done the circles for shields with 1 or 2 colors but I am having troubles with 3 color shields

I'm using this for 2 colors shields

.equipo{
    border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  background-image: linear-gradient(to right, #01135B 50%, #FFFFFF 50%);
  background-image: -o-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
  background-image: -moz-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
  background-image: -webkit-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
  background-image: -ms-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
  display: inline-block;
}
<div class="equipo"></div>

but I want that it have 3 color and I try this, but it doesn't work

.equipo{
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  display: inline-block;
}
<div class="equipo"></div>

What I have to do, I want 3 or more colors?

Upvotes: 0

Views: 128

Answers (4)

Ganesh Putta
Ganesh Putta

Reputation: 2681

here i worked for a flag, this is same as your requirement, try this

.flag-sample {
  border-radius: 50%; 
  border: 1px solid #333333; 
  width: 100px;
  height: 100px;
  display: block;  
  background: -moz-linear-gradient(left center , #01135b 33%, #ffffff 33%, #ffffff 66%, #df0408 66%);
  
}
<div class="flag-sample"></div>

Upvotes: 0

aavrug
aavrug

Reputation: 1889

Try this just added new linear gradients which is overriding your styling if this is what you were looking for you can remove the upper gradients. Also added one alternate with many colors.

.equipo{
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
  display: inline-block;
  background-image: -o-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
  background-image: -ms-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
  background-image: -webkit-gradient(linear, right top, right bottom, color-stop(15%,#a8e9ff), color-stop(32%,#052afc),color-stop(90%,#ff8d00));
}

.grad {
  background-image: -moz-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
  background-image: -webkit-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
  background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
}
<div class="equipo"></div>
<div class="equipo grad"></div>

Upvotes: 0

Quinn
Quinn

Reputation: 136

It is the nature of CSS gradients to behave, well, like gradients. The trick for having discrete colors, which do not blend, is to make the blend area have no width. This is done by putting two colors at the same point on the gradient, as shown below.

.equipo {
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  background-image: linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  background-image: -o-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  background-image: -moz-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  background-image: -webkit-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  background-image: -ms-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
  display: inline-block;
}
<div class="equipo"></div>

Upvotes: 3

pol
pol

Reputation: 2701

Add the same color again, if one ends at 30%, the next one should start at 30%,
As so: -moz-linear-gradient(left center , #01135b 30%, #ffffff 30%, #ffffff 65%, #df0408 30%)

This will essentially make a hard edge/stop on the previous color

.equipo {
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #333333;
  box-sizing: border-box;
  width: 25px;
  height: 25px;
  display: inline-block;
  
  background: -moz-linear-gradient(left center , #01135b 32%, #ffffff 32%, #ffffff 66%, #df0408 66%);
  
}
<div class="equipo"></div>

Apply the same principal to the rest.

Upvotes: 0

Related Questions