CSS を使用して斜めの背景を作成するにはどうすればよいですか?

CSS で斜めの背景を作成する

Web デザインの領域では、視覚的に魅力的で動的なレイアウトを作成するには、珍しい形状やグラデーションを組み込むことがよくあります。 。そのような課題の 1 つは、Web サイトに独特の雰囲気を加えることができる、斜めまたは斜めの背景の作成です。複雑に思えるかもしれませんが、CSS を使用してこの効果を実現するのは驚くほど簡単です。

この詳細なガイドでは、CSS を使用して斜めの背景を作成する手順を説明します。ユーザーが提供した例では、背景を 2 つの対照的な色に分割する対角線が示されています。この効果を再現するために、疑似要素を利用してスキュー変換を適用します。

body {
  height: 100vh;
  margin: 0;
  background: yellow;
}

body:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300px;
  background: #000;
  transform: skew(-30deg);
  transform-origin:top;
}

このコードでは:

• body 要素はページの高さを 100 に設定します。ビューポートの高さの % を指定し、マージンを削除し、黄色の背景を適用します。
• body:before 疑似要素は新しい要素を作成します。本体の最初の子の前の要素。空のコンテンツ値 (content: "") が与えられ、空のコンテナーになります。
• 疑似要素を絶対位置に配置し (position: ABS)、ページの高さと幅をカバーしながら、ページの高さと幅をカバーします。左端 (左: 0; 幅: 300px;)。
• 背景色 (背景: #000) が黒に設定され、斜めになっています。
• transform: skew(-30deg) プロパティは、要素を水平方向に -30 度傾けて、斜めの傾きを作成します。
• transform-origin:top は、傾きの起点となる点を指定します。変容が生まれる。この場合、それは要素の上部です。

斜め変換の角度と疑似要素の位置を調整することで、斜めの背景の形状とサイズを好みに合わせてカスタマイズできます。デザインのニーズ。

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