Bagaimana untuk Membuat Pemisahan Latar Belakang Dua Nada oleh Garis Pepenjuru dalam CSS?

Membuat Latar Belakang Dua Nada Dipisahkan oleh Garis Pepenjuru dalam CSS

Memisahkan latar belakang kepada dua warna atau tekstur yang berbeza dengan garis pepenjuru adalah kesan visual yang menarik. Ini boleh dicapai melalui CSS, seperti yang ditunjukkan dalam contoh berikut.

Untuk mencipta latar belakang belah pepenjuru, ikut langkah berikut:

1. Buat dua div berasingan untuk mewakili kedua-dua belah latar belakang. Berikan mereka kelas yang berbeza, seperti "kiri" dan "kanan."
2. Gunakan warna pepejal atau latar belakang tekstur pada setiap div menggunakan sifat warna latar belakang atau imej latar belakang.
3. Letakkan div sebelah-menyebelah menggunakan apungan atau paparan: inline-block.
4. Gunakan kecerunan linear pada latar belakang menggunakan sifat imej latar belakang. Gunakan peralihan keras untuk mencipta garis pepenjuru yang tajam antara warna atau tekstur.

Berikut ialah contoh coretan kod:

<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>

Kod ini mencipta latar belakang belah pepenjuru dengan pepejal warna kelabu di sebelah kiri dan tekstur di sebelah kanan. Garis pepenjuru dibuat menggunakan kecerunan linear 30 darjah.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Pemisahan Latar Belakang Dua Nada oleh Garis Pepenjuru dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!