CSSで対角線で分割されたツートンカラーの背景を作成するにはどうすればよいですか?

CSS で対角線で分割された 2 トーンの背景を作成する

対角線で背景を 2 つの異なる色またはテクスチャに分割する視覚的に印象的な効果です。次の例に示すように、これは CSS を通じて実現できます。

斜めに分割された背景を作成するには、次の手順に従います。

1. 2 つの個別の div を作成して、背景の 2 つの側面を表します。背景。 「left」や「right」などの異なるクラスを割り当てます。
2. background-color プロパティまたはbackground-image プロパティを使用して、各 div に単色またはテクスチャの背景を適用します。
3. div を配置します。 float または display: inline-block を使用して並べて表示します。
4. background-image プロパティを使用して背景に線形グラデーションを適用します。ハード トランジションを使用して、色またはテクスチャ間に鋭い対角線を作成します。

コード スニペットの例を次に示します。

<code class="css">.diagonal-split-background {
  width: 50%;
  height: 100vh;
  float: left;
}

.left {
  background-color: #013A6B;
}

.right {
  background-image: url("texture.jpg");
}

.diagonal-split-background::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}</code>

このコードは、単色で斜めに分割された背景を作成します。左側がグレー色、右側がテクスチャです。対角線は 30 度の直線グラデーションを使用して作成されます。

以上がCSSで対角線で分割されたツートンカラーの背景を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。