Bagaimanakah cara membuat latar belakang senget menggunakan CSS?

Mencipta Latar Belakang Serong dalam CSS

Dalam bidang reka bentuk web, mencipta reka letak yang menarik secara visual dan dinamik selalunya boleh melibatkan menggabungkan bentuk dan kecerunan yang luar biasa . Satu cabaran sedemikian ialah penciptaan latar belakang yang condong atau pepenjuru, yang boleh menambah bakat tersendiri pada mana-mana tapak web. Walaupun ia kelihatan rumit, mencapai kesan ini dengan CSS adalah sangat mudah.

Panduan terperinci ini akan memandu anda melalui langkah-langkah untuk mencipta latar belakang senget menggunakan CSS. Contoh yang diberikan oleh pengguna menunjukkan garis pepenjuru yang membahagikan latar belakang kepada dua warna yang berbeza. Untuk meniru kesan ini, kami akan menggunakan elemen pseudo dan menggunakan transformasi condong.

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

Dalam kod ini:

• Elemen badan menetapkan ketinggian halaman kepada 100 % ketinggian port pandangan, menghapuskan jidar dan menggunakan latar belakang kuning.
• Isi:sebelum elemen pseudo mencipta elemen baharu sebelum anak pertama badan itu. Ia diberi nilai kandungan kosong (kandungan: ""), menjadikannya bekas kosong.
• Kami meletakkan elemen pseudo secara mutlak (kedudukan: mutlak), meliputi ketinggian dan lebar halaman sambil menjajarkannya dengan tepi kiri (kiri: 0; lebar: 300px;).
• Warna latar belakang (latar belakang: #000) ditetapkan kepada hitam, mewujudkan bahagian senget.
• Transformasi: condong(- Sifat 30deg) memesongkan elemen secara mendatar sebanyak -30 darjah, mewujudkan condong pepenjuru.
• Asal-ubah:atas menentukan titik dari mana penjelmaan condong itu berasal. Dalam kes ini, ia adalah bahagian atas elemen.

Dengan melaraskan sudut penjelmaan condong dan kedudukan elemen pseudo, anda boleh menyesuaikan bentuk dan saiz latar belakang senget agar sesuai dengan anda. keperluan reka bentuk.

Atas ialah kandungan terperinci Bagaimanakah cara membuat latar belakang senget menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!