Box-Shadow を使用して CSS で逆向きのえぐられた角を作成する方法

CSS で逆向きのすくい角を作成する

現在の CSS コードでは、逆向きのすくい角を作成することを目的としています。提供されたコードは、border-radius を利用して角が丸い効果を実現します。ただし、凹面の半径を作成するには、box-shadow プロパティを利用できます。

この手法には次の手順が含まれます:

1. CSS を使用して、オーバーフローが非表示になった透明な正方形を作成します。
2. ボックス シャドウを使用して正方形に透明な円を追加します。
3. のみが表示されるように円を戦略的に配置します。

このアプローチは、凹んだコーナーを作成するためのソリューションを提供します。以下はメソッドを説明するためのサンプル スニペットです:

position:relative;<br>width:200px;<br>height:50px;<br>background-color:blue;<br>境界半径: 9999px 0 0 9999px;<br> マージン: 30px;<br> text-align: center;<br> color: #fff;<br> padding-top: 10px;<br>}<h1 id="top">top,</h1><h1 id="bottom">bottom {</h1><p>position : 絶対;<br> 高さ: 30px;<br> 幅: 30px;<br>右: 0;<br> オーバーフロー: 非表示;<br>}</p><h1 id="上">上 {</h1><p>上: -30px;<br>}</p><h1 id="下">下 {</h1><p>下: -30px;<br>}</p><h1 id="top-before">top::before,</h1><h1 id="bottom-before">bottom::before {</h1><p>内容: '';<br> 位置: 絶対;<br>右: 0;<br> 高さ: 200%;<br> 幅: 200%;<br> border-radius: 100%;<br> box-shadow: 10px 10px 5px 100px blue;<br> z-index: -1;<br>}</p><h1 id="top-before">top::before {</h1><p>上: -100%;<br>}</p>

このコードでは、オーバーフローを非表示にした正方形とボックス シャドウのある円を組み合わせて、目的の凹面半径効果を実現します。

以上がBox-Shadow を使用して CSS で逆向きのえぐられた角を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。