Bagaimana untuk Mencipta Latar Belakang Dua Nada dengan Pemisahan Diagonal Menggunakan CSS?

Mencipta Latar Belakang Dua Nada dengan Pemisahan Diagonal Menggunakan CSS

Objektifnya adalah untuk mencipta reka bentuk latar belakang yang terdiri daripada dua bahagian yang dipisahkan oleh garis pepenjuru, dengan setiap separuh menampilkan warna atau tekstur yang berbeza. Hasratnya adalah untuk melaksanakan reka bentuk ini menggunakan dua div berasingan untuk memudahkan animasi jQuery di mana mengklik pada kedua-dua belah pihak mencetuskan pengembangan atau pengecutan segi tiga masing-masing, mensimulasikan kesan tirai.

Penyelesaian:

Pendekatan yang disyorkan melibatkan penggunaan kecerunan latar belakang dengan titik peralihan yang tajam. Ini menyediakan kaedah yang bersih dan berkesan untuk mencapai kesan yang diingini.

Kod CSS:

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

Dalam kod ini, kelas latar belakang belah pepenjuru digunakan kepada elemen bekas. Sifat warna latar belakang mentakrifkan warna pepejal untuk separuh daripada latar belakang, manakala sifat imej latar belakang membentuk kecerunan linear, membelah latar belakang dengan berkesan sepanjang garis pepenjuru. Parameter sudut 30deg menetapkan orientasi belahan pepenjuru. Dua nilai warna dalam kecerunan menentukan warna bahagian masing-masing.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Latar Belakang Dua Nada dengan Pemisahan Diagonal Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!