3

Tenho que fazer um círculo em CSS, onde o seu background possui duas cores na diagonal. Conforme imagem: inserir a descrição da imagem aqui

O que eu consegui fazer com 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>

No caso, está certo. Porém, a imagem está esmaecendo. Como tirar isso!

2 Respostas 2

1

Não é preciso repetir o a última cor:

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

Basta apenas 2 cores, a inicial e a final, sendo que ambas devem ter a mesma porcentagem:

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

Seu código ficaria assim (adicionei uma borda, caso queira):

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

1

Na propriedade background no lugar de 0% alterei para 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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .