Bagaimana untuk Membuat Latar Belakang Serong dengan CSS?

Mencipta Latar Belakang Serong dengan CSS

Dalam soalan ini, pengguna bertujuan untuk mencipta latar belakang senget menggunakan CSS. Mereka menyediakan imej yang menunjukkan reka letak yang diingini dan menerangkan kod yang telah mereka cuba, yang tidak menghasilkan hasil yang diharapkan.

Untuk mencapai latar belakang senget yang diingini, kita boleh menggunakan elemen pseudo dengan transformasi condong. Teknik ini menawarkan kawalan tepat ke atas sudut dan kedudukan elemen senget.

Kod berikut menunjukkan cara mencipta latar belakang senget:

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, kami memperkenalkan pseudo- elemen, ":before," yang akan bertindak sebagai latar belakang yang condong. Kami meletakkan unsur pseudo ini secara mutlak dalam badan untuk mengawal penempatannya. Sifat "transform: skew(-30deg)" memesongkan elemen pseudo, menghasilkan kesan senget. Sifat "transform-origin: top" menentukan bahawa condong harus berasal dari bahagian atas elemen pseudo, memastikan latar belakang menyerong merentasi keseluruhan elemen.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Latar Belakang Serong dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!