Make a circle gradient on the diagonal

Question

Make a circle gradient on the diagonal

Navigation

#1 by (1 votes)
#2 by (1 votes)

3

I have to make a circle in CSS, where your background has two colors diagonally. As picture:

WhatIwasabletodowithCSS:

.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, that's right. However, the image is fading. How to take it!

css

asked by anonymous 03.11.2017 / 17:38

2 answers

1

In property background instead of 0% changed 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>

03.11.2017 / 17:41

Relate items in an array recursively with PHP How to capture the closing event on a Stage?

score 1 · Accepted Answer

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, initial and end , both of which should 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'd like):

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