SVG や Canvas を使用せずに CSS で斜めのコーナーを作成するにはどうすればよいですか?

CSS の角度のあるコーナー: 最先端のテクニック

見た目に美しい Web サイトをデザインすることは、特に角度のあるコーナーを作成する場合には困難になることがあります。角。ただし、CSS の進歩により、SVG やキャンバスなどの非ネイティブな方法に頼らずにこの効果を実現できるようになりました。

角度付きコーナーの作成

へ斜めのコーナーを作成するには、:before および :after 疑似要素を親コンテナとともに利用できます。これらの要素の位置、境界線のスタイル、オフセットを操作することで、境界線を維持しながらコーナーを効果的にブロックすることができます。

ステップ 1: コンテナの境界線

開始コンテナ要素に境界線を追加して、斜めの角の外側の境界を定義します。

ステップ2: :before 擬似要素

次に、:before 擬似要素を追加して、必要な角を切り取ります。境界線を覆うように -1px の負のオフセットを使用して、絶対位置に配置します。上部に実線の境界線を適用し、右側に透明な境界線を適用して、斜めの線を作成します。

ステップ 3: :疑似要素の後

線を作成するにはカットオフの内側に、-2px のわずかに小さいオフセットを使用して :after 疑似要素を追加します。上部に白い実線の境界線を付け、右側に透明な境界線を付けます。

実装例

次の CSS コードは、これらの原則を適用する方法を示しています。

.cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}

このコードを使用すると、コンテナ内で画像要素をラップすることができ、指定された角度の画像が生成されます。 Corner.

代替アプローチ

CSS テクニックは解決策を提供しますが、角度のあるコーナーを正確に制御する必要がある場合、またはマスキングや画像クリッピングなどの追加機能が必要な場合は、 SVG または Canvas を使用する方が適切なアプローチである可能性があります。

以上がSVG や Canvas を使用せずに CSS で斜めのコーナーを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。