Multi-colored single icon

I have some styles defined for the Fontawesome icons to color the browser icons into their corresponding brand color. So Opera icon is red, IE blue, and Firefox orange.

But since Chrome has 4 different colors, and very harshly separated, I'm wondering if it's possible to mimic something close to that with CSS only?

The closest I know to get there is gradients, but obviously it doesn't get close to looking correct.

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>

Could something more be done here with some background clipping and CSS hackery to look closer to the original icon's visual identity?

Solution

With multiple background you can do it but as I wrote in this pevious answer it remain specific to this particular icon:

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

The same code with the V4 of Font Awesome

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