html - mix-blend-mode を使用して、兄弟テキストを正常に保ちながら、親からシェイプをノックアウトする

Question

この種の形状を作成しようとしている人々についての投稿をたくさん読みましたが、私が持っている最善の解決策は を使用することmix-blend-mode:screen;です. これらの投稿は 5 年以上前のものなので、新しい種類の解決策があることを願っています。

ただし、テキストが の影響を受けないようにする必要もありますmix-blend-mode。isolation:isolate;私はラッパーを試しました<div>が、円が消えたか、白いコンテナをノックアウトせず、それとブレンドしただけなので、それは役に立ちませんでした（はい、それが本来の目的であり、必要なことではないことに気づきました） ）。また、テキストを別の場所に配置して、デスクトップで機能している間<div>に使用しようとしposition:absolute;ましたが、応答がなく、本当にハッキリしているようです。

つまり、コンテンツのテキストの色に影響を与えずに、以下にあるものを作成する必要があります。

どんな助けでも大歓迎です。

.bg { 
  background: #666; 
  height: 100vh;
  padding: 50px;
}

.flag {
  background-color: white;
  mix-blend-mode: screen;
  height: auto;
  padding: 20px;
  width: 400px;
  overflow: hidden;
  position: relative;
}

.flag p {
  font-family: 'Helvetica Neue LT Std 47 Light Condensed',Helvetica,Arial,Lucida,sans-serif;
  color: #58595B!important;
  font-size: 16px;
}

.green {
    color: #B3BE35;
}

.flag-circle {
    background-color: black;
    border-radius: 50%;
    width: 175px;
    height: 165%;
    position: absolute;
    top: -32%;
    right: -150px;
}

<div class="bg">
  
  <div class="flag">
    <p>
      In this example <strong class="green">the text needs to be normal</strong> and the mix-blend-mode should only apply to the circle cutting out the right side of the "flag".
    </p>
    <div class="flag-circle"></div>
  </div>
  
</div>