異なる色の文字をスタイルする方法

Question

色のオーバーフローを隠す文字を使用したいと思います。 Googleのアイコンのようなものがありますが、CSSで完全に構築されています。その赤い矩形のオーバーフローを隠すためのソリューションはありますか？ Googleロゴを再構築したい。 CSSグラデーションを使用して

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

 
} 
 

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

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

Answer 1

あなたに所望の効果を得るかもしれない、しかしそれは広くため-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

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; 
 
}

<h1>G</h1>

のサポートされていません

Answer 3

Googleのロゴに似たような境界線の色で遊んでください。 （より簡単に見るには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>