Rumah > hujung hadapan web > tutorial css > Bagaimana Membuat Latar Belakang Serong Menggunakan Elemen Pseudo CSS?

Bagaimana Membuat Latar Belakang Serong Menggunakan Elemen Pseudo CSS?

Barbara Streisand
Lepaskan: 2024-11-09 02:09:02
asal
822 orang telah melayarinya

How to Create a Slanted Background Using CSS Pseudo Elements?

Mencipta Latar Belakang Serong dengan CSS

Mencipta latar belakang senget boleh dicapai menggunakan pelbagai pilihan penggayaan CSS. Satu pendekatan yang berkesan melibatkan penggunaan elemen pseudo bersama-sama dengan transformasi condong.

Pelaksanaan dengan Unsur Pseudo CSS

Kod CSS berikut menunjukkan cara mencipta latar belakang senget menggunakan elemen pseudo :

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;
}
Salin selepas log masuk

Kod ini terhasil a斜斜背景 terletak di sebelah kiri bekas. Transformasi: sifat condong(-30deg) menyengetkan elemen pseudo, menghasilkan condong yang diingini.

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan