CSSで境界線を使用せずに斜めのDivを作成する方法は?

境界線を使用せずに斜めの Div を作成する

問題:

境界線を使用して斜めの Div を作成することは、 div は画像の上に配置されます。レスポンシブ対応の CSS を使用して、斜めのエッジを作成するにはどうすればよいですか?

解決策:

斜めの擬似要素を使用して、斜めの背景を作成できます。このアプローチにより、テキストは変換操作の影響を受けなくなります。これを実現する方法は次のとおりです:

1. 擬似要素の配置:
   絶対配置で :after 擬似要素を div に追加します。
2. スキューを定義します:
   -webkit-transform を使用します: skew(-45deg);プロパティ (またはそのベンダー プレフィックス) を使用して、擬似要素を 45 度傾けます。
3. 変換原点を設定します:
   変換原点を指定します: 100% 0;擬似要素が右下隅から斜めになるようにします。
4. オーバーフローの非表示:
   オーバーフローの追加: 非表示。
5. コンテンツの後ろにスタック:
   擬似要素に負の Z インデックスを使用して、div のコンテンツの後ろにスタックします。

コード例:

HTML:

以上がCSSで境界線を使用せずに斜めのDivを作成する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。