多色单个图标

Question

我为 Fontawesome 图标定义了一些样式，以将浏览器图标着色为相应的品牌颜色。所以Opera图标是红色，IE蓝色，Firefox橙色。

但是，由于 Chrome 有 4 种不同的颜色，而且分隔非常严苛，我想知道是否可以仅使用 CSS 来模仿接近于那种颜色的东西？

我所知道的最接近那里的是渐变，但显然它并没有接近看起来正确。

i.fa-chrome {
  font-size: 3rem;
  background-image: linear-gradient(to bottom right, yellow, limegreen, crimson, blue, blue);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="p-3">
  <i class="fa fab fa-chrome"></i>
</div>

是否可以通过一些背景剪辑和 CSS 技巧来做更多的事情，以更接近原始图标的视觉识别？

Answer 1

有了多个背景，你就可以做到，但正如我在这个先前的答案中所写的那样，它仍然特定于这个特定的图标：

.fa-chrome {
  font-size: 3rem;
  background: 
      linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0%  /37% 30%,
      linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
     
      radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
      linear-gradient( 47deg,        #34a853 42%,transparent 43%),
      linear-gradient(-72deg,        #fbbc05 42%,transparent 43%),
      linear-gradient(-199deg,       #ea4335 42%,transparent 43%);
  background-repeat:no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css">
<i class="fab fa-chrome fa-8x"></i>
<i class="fab fa-chrome fa-5x"></i>
<i class="fab fa-chrome fa-3x"></i>

与Font Awesome的V4相同的代码

.fa-chrome {
  background: 
      linear-gradient(to bottom left, transparent 49%,#ea4335 50%) 105% 0%  /37% 30%,
      linear-gradient(to bottom right,transparent 49%,#fbbc05 50%) 64% 100% /35% 43%,
     
      radial-gradient(farthest-side, #4285f4 46%,transparent 47%),
      linear-gradient( 47deg,        #34a853 42%,transparent 43%),
      linear-gradient(-72deg,        #fbbc05 42%,transparent 43%),
      linear-gradient(-199deg,       #ea4335 42%,transparent 43%);
  background-repeat:no-repeat;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<i class="fa fa-chrome fa-5x"></i>
<i class="fa fa-chrome fa-4x"></i>
<i class="fa fa-chrome fa-2x"></i>