CSSのみを使用して長方形から円を切り取るには?

CSS で長方形から円を切り出す

この効果を作成する 1 つのアプローチは、要素と賢いツールの組み合わせを使用することです。境界半径の使用。ただし、この手法には、特定のブラウザでの不規則なマークアップや見苦しいギャップなどの潜在的な欠点があります。

代替アプローチ

幸いなことに、次の方法を使用する代替方法があります。単一の要素と擬似要素。このアプローチでは、親要素の放射状グラデーションの背景の力を活用し、擬似要素は透明な円の切り抜きとして機能します。

次のコード スニペットを考えてみましょう:

div:before {
  /* creates the red circle */
  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;  
  
  /* 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);
}

説明

• div 要素は、丸みを帯びた長方形の形状を定義します。
• div 内で、疑似要素 :before は、絶対位置と赤い実線の境界線を使用して円形の切り抜きを作成します。
• 透明なギャップと塗りつぶしの効果は、放射状の適用によって実現されます。 div 要素のグラデーションの背景。グラデーションによって中央に透明な領域が作成され、疑似要素の円と重なり、切り抜き効果が得られます。

この手法には、次のような多くの利点があります。

• 追加の要素が不要になり、マークアップが簡素化されます。
• 目立った影響もなく、どのブラウザーでも一貫して動作します。
• 簡単な計算を使用して、円を長方形の中心に正確に配置できます。

この代替アプローチを実装することで、CSS で長方形の形状から円を効果的に切り出すことができます。以前の方法のような複雑さや落とし穴なしに、望ましい視覚的結果を達成できます。

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