CSS を使用して斜めに分割されたツートンカラーの背景を作成する方法

CSS を使用して斜めに分割したツートンカラーの背景を作成する

目的は、2 つの半分で区切られた背景デザインを作成することです。対角線で、それぞれの半分が異なる色または質感を特徴としています。その目的は、2 つの個別の div を使用してこのデザインを実装し、どちらかの側をクリックするとそれぞれの三角形の拡大または縮小がトリガーされ、カーテン効果をシミュレートする jQuery アニメーションを容易にすることです。

解決策:

推奨されるアプローチには、鋭い遷移点を持つ背景のグラデーションを利用することが含まれます。これにより、目的の効果を達成するためのクリーンで効果的な方法が提供されます。

CSS コード:

<code class="css">.diagonal-split-background {
  background-color: #013A6B;
  background-image: -webkit-linear-gradient(30deg, #013A6B 50%, #004E95 50%);
}</code>

このコードでは、diamond-split-background クラスが適用されます。コンテナ要素に。背景色プロパティは背景の半分の単色を定義し、背景画像プロパティは線形グラデーションを確立し、背景を対角線に沿って効果的に分割します。 30 度の角度パラメータは、対角分割の方向を設定します。グラデーション内の 2 つの色の値によって、それぞれの半分の色相が決まります。

以上がCSS を使用して斜めに分割されたツートンカラーの背景を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。