如何设置不同颜色的字母

Question

我想用一个隐藏颜色溢出的字母。想要谷歌图标，但完全用CSS构建。有没有解决方案来隐藏红色矩形的溢出？想要重建Google徽标。

#letter {
	background: white;
	font-family: "Product Sans", Arial, sans-serif;
	color: green;
	font-size: 200px;
	font-weight: 900;
	opacity: 0.1;
	position: relative;
	margin-top: 0px;
	margin-left: 0px;
	overflow: hidden;

}

#circle1 {
	width: 30px;
	height: 100px;
	background: red;
	position: absolute;
	top: 30px;
	left: 80px;
}

      <p id="letter">G
      <div id="circle1"></div>http://stackoverflow.com/questions/ask#

Answer 1

使用CSS渐变可能会获得所需的效果，但由于-webkit-background-clip: text;

而未得到广泛支持

h1 {
  font-size: 72px;
  background: -webkit-linear-gradient(top, #cc0223 28%, #016b14 29%, #016b14 44%, #016b14 63%, #3b01c1 64%, #3b01c1 85%, #febf01 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h1>E</h1>

Answer 2

在底座中，使用边框颜色来获得与谷歌徽标相似的内容。 （见第二个基础更容易看到它）

在此之后，使用混合模式设置G，以隐藏溢出。

这不适用于Ie / Edge，因为不支持混合模式。

.base {
    height: 0px;
  width: 0px;
  border-width: 100px 200px;
  border-style: solid;
  border-top-color: red;
  border-left-color: yellow;
  border-right-color: blue;
  border-bottom-color: green;
  position: relative;
}

.letter {
  font-size: 150px;
  line-height: 190px;
  position: absolute;
  left: -199px;
  top: -99px;
  width: 398px;
  height: 198px;
  background-color: white;  
  text-align: center;
  mix-blend-mode: lighten;
}

<div class="base">
  <div class="letter">G</div>
</div>
<div class="base"></div>

Answer 3

＆＃13;

＆＃13;

h1 {
  font-size: 100px;
  background: -webkit-linear-gradient(top, red 28%, green 29%, green 44%, green 63%, orange 64%, orange 85%, orange 85%, blue 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

＆＃13;

<h1>G</h1>

＆＃13;

＆＃13;

＆＃13;