CSS を使用して長方形から円を効率的に切り取るにはどうすればよいですか?

CSS を使用して長方形から円を切り取る

長方形から透明な円を切り取るという挑戦が始まりましたオンラインでのディスカッション。いくつかの解決策は存在しますが、制限やバグがあり、ユーザーは代替案を探す必要があります。

放射状グラデーションを使用した代替アプローチ

最初の解決策に対する代替アプローチの 1 つは、次のとおりです。親要素に放射状グラデーションを使用します。このグラデーションによって円形が作成され、実際の円を定義するために疑似要素が使用されます。この簡素化されたマークアップにより、複数の div の必要性がなくなり、IE 10/11 に関連するバグに対処できます。

div:before {  /* creates the red circle */
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;  /* top = -75px, radius = 45px, so circle's center point is at -30px */
  left: calc(50% - 45px);
  background-color: red;
  border-radius: 50%;
}
div {
  position: relative;
  margin: 100px auto 0 auto;
  width: 90%;
  height: 150px;
  border-radius: 6px;  
  
  /* only the below creates the transparent gap and the fill */
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);  /* use same center point as with concentric circles but larger radius */
}

この放射状グラデーションのアプローチを利用することで、長方形の形状から効果的に円を切り出すことができ、以前のソリューションの制限と、異なるブラウザ間での互換性の確保。

以上がCSS を使用して長方形から円を効率的に切り取るにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。