Gradient diagonally in a circle

Asked

Viewed 69 times

3

I have to make a circle in CSS, where your background has two colors diagonally. Image-wise: inserir a descrição da imagem aqui

What I managed to do with CSS:

.cor1 {
  width: 29px;
  height: 29px;
  text-align: center;
  float: left;
  border-radius: 50%;
  border: 2px solid #fff;
  font: 400 14px/29px 'Montserrat', Tahoma, Arial, Helvetica, sans-serif;
  color: #fff!important;
  background: rgb(0, 139, 206);
  background: -moz-linear-gradient(-45deg, rgba(0, 139, 206, 1) 0%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(0, 139, 206, 1) 0%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 1) 100%);
  background: linear-gradient(135deg, rgba(0, 139, 206, 1) 0%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bce', endColorstr='#ffffff', GradientType=1);
}
<a class="cor1" href="/"></a>

In this case, it’s right. However, the image is fading. How to take this!

css

2 answers

1

On the estate background in place of 0% I switched to 50%

background: linear-gradient(135deg, rgba(0, 139, 206, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 1) 100%);


.cor1 {
  width: 29px;
  height: 29px;
  text-align: center;
  float: left;
  border-radius: 50%;
  border: 2px solid #fff;
  font: 400 14px/29px 'Montserrat', Tahoma, Arial, Helvetica, sans-serif;
  color: #fff!important;
  background: rgb(0, 139, 206);
  background: -moz-linear-gradient(-45deg, rgba(0, 139, 206, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 1) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(0, 139, 206, 1) 50%, rgba(0, 255, 255, 1) 55%, rgba(255, 255, 255, 1) 100%);
 background: linear-gradient(135deg, rgba(0, 139, 206, 1) 50%, rgba(255, 255, 255, 1) 55%, rgba(255, 255, 255, 1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bce', endColorstr='#ffffff', GradientType=1);
}
<a class="cor1" href="/"></a>

1


No need to repeat the last color:

linear-gradient
(135deg, rgba(0, 139, 206, 1) 0%,
rgba(255, 255, 255, 1) 55%, <= cor branca
rgba(255, 255, 255, 1) 100%); <= cor branca

Just 2 colors, the initial and the final, both must have the same percentage:

linear-gradient
(135deg, rgba(0, 139, 206, 1) 55%,
rgba(255, 255, 255, 1) 55%);

Your code would look like this (I added a border if you want):

.cor1 {
  width: 29px;
  height: 29px;
  text-align: center;
  float: left;
  border-radius: 50%;
  border: 2px solid #fff;
  font: 400 14px/29px 'Montserrat', Tahoma, Arial, Helvetica, sans-serif;
  color: #fff!important;
  background: rgb(0, 139, 206);
  background: -moz-linear-gradient(-45deg, rgba(0, 139, 206, 1) 55%, rgba(255, 255, 255, 1) 55%);
  background: -webkit-linear-gradient(-45deg, rgba(0, 139, 206, 1) 55%, rgba(255, 255, 255, 1) 55%);
  background: linear-gradient(135deg, rgba(0, 139, 206, 1) 55%, rgba(255, 255, 255, 1) 55%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bce', endColorstr='#ffffff', GradientType=1);
  border: .5px solid rgba(0, 139, 206,.5); /* se quiser, ainda pode adicionar uma borda */
}
<a class="cor1" href="/"></a>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.