css - 如何设计不同颜色的字母

Question

我想使用一个隐藏颜色溢出的字母。想要像谷歌图标但完全用 CSS 构建的东西。有没有办法隐藏那个红色矩形的溢出？想要重建谷歌标志。

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