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); }
説明
この手法には、次のような多くの利点があります。
この代替アプローチを実装することで、CSS で長方形の形状から円を効果的に切り出すことができます。以前の方法のような複雑さや落とし穴なしに、望ましい視覚的結果を達成できます。
以上がCSSのみを使用して長方形から円を切り取るには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。