CSS のみを使用して長方形の中に円形の切り抜きを作成するにはどうすればよいですか?

CSS を使用して長方形の形状から円形の切り抜きを作成する

提起された質問は、長方形の中に円形の切り抜きを作成するための代替アプローチを求めています。 。最初の解決策では要素と境界線の組み合わせを使用しており、満足のいく効果が得られましたが、クリーンなマークアップが欠けており、特定のブラウザーではバグが発生しました。

代替方法

詳細エレガントなソリューションには、単一の要素 (擬似要素とともに) を利用し、放射状のグラデーションの背景を使用することが含まれます。修正された CSS は次のとおりです。

div:before {
  position: absolute;
  content: '';
  width: 90px;
  height: 90px;
  top: -75px;
  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;
  
  background: radial-gradient(50px 50px at 50% -30px, rgba(0, 0, 0, 0) 49.5px, rgba(0, 0, 0, .8) 50.5px);
}

説明

• 擬似要素 (:before) は、90 ピクセルの寸法の円形の赤い切り抜きを作成し、配置します。
• 親要素には、残りを埋める透明な放射状グラデーションがあります。
• 透明なグラデーションの半径は、切り欠きの半径よりわずかに大きく、エッジの周りに薄い透明なギャップができます。
• センタリング円と透明のギャップは、放射状グラデーションの中心点の配置によって制御されます。

この更新されたメソッドは、クリーンなマークアップの両方に対処します。最初の解決策で発生した懸念事項とブラウザのバグ。 CSS のみを使用して、長方形の形状からシームレスで視覚的に美しい円形の切り抜きを提供します。

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