円形の上に文字を重ね、重なった部分の色を反転させたい

Question

実現したいこと

現在Webサイトを制作しています。
添付した画像のように、円形の上に文字を重ね、重なった部分の色を反転させるようにしたいのですが、
やり方が分かりません。

試したこと

（１）背景の円形はCSSで作った四角にborder-radiusをかけて作る。
全体にoverflow: hiddenをかけてはみ出した文字を非表示。
はみ出した部分に文字を重ねる方法。
→背景の見た目は円形だが実際の範囲が四角なので難しい。

（２）背景の円形をradial-gradientを使って作る。
そして文字にmix-blend-mode:differenceを使って重なり部分の色を反転させる。
→一応できたが、文字が大きく右側にはみ出したデザインのため、
radial-gradientの範囲を文字が出てしまい見えなくなる。

SVGとclip-pathを使う方法なども考えましたが、
結局やり方が分からず断念しました。

（２）の時のソースコードを一応載せておきます。
文字の位置はずれたままにしてあります。

						<h1>
							<span>Portfolio</span>
							<span>Website</span>
						</h1>
						<div class="radius"></div><!--/.radius -->

h1{
  position: absolute;
  top: 32rem;
  left: 71rem;
  z-index: 1;
  font-size: 16rem;
  line-height: 1.2;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #fafafa;
   mix-blend-mode: difference;
}

h1 span:nth-of-type(1){
  display: block;
}

h1 span:nth-of-type(2){
  display: block;
  padding-left: 20.7rem;
}

.radius{
  position: absolute;
  top: 16rem;
  left: 57.3rem;
  z-index: 0;
  width: 78.2rem;
  height: 78.2rem;
  background: #333;
  transition: .6s;
  background-image: radial-gradient(#333, #333 50%, #fafafa 50.3%);
  z-index: 0;
}

ご教示いただけますと嬉しいです。
よろしくお願いします。

Answer 1

つまり背景色を伸ばせばいいということでしょうか？

サンプルを置いておきます。

https://jsfiddle.net/Lhankor_Mhy/t31qaLm5/

                        <h1>
                            <span>Portfolio</span>
                            <span>Website</span>
   
                            <div class="radius"></div><!--/.radius -->
                        </h1>

h1{
  position: absolute;
  top: 32rem;
  left: 71rem;
  z-index: 1;
  font-size: 16rem;
  line-height: 1.2;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #fafafa;
}

h1 span:nth-of-type(1){
  display: block;
   mix-blend-mode: difference;
}

h1 span:nth-of-type(2){
  display: block;
  padding-left: 20.7rem;
   mix-blend-mode: difference;
}

.radius{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 78.2rem;
  background: #fafafa;
  transition: .6s;
  z-index: -1;
}
.radius:before{
  position: absolute;
  top: calc(16rem - 32rem - 0.67em);
  left: calc(57.3rem - 71rem);
  content: "";
  display: block;
  width: 78.2rem;
  height: 78.2rem;
  background: #333;
  background-image: radial-gradient(#333, #333 50%, #fafafa 50.3%);
}

Comments

[nanapon]

頂いたコードでできました！
背景色を親要素の幅と合わせるようにしたということですね。

ありがとうございます！