Bagaimana untuk Membuat Div Serong Tanpa Menggunakan Sempadan dalam CSS?

Membuat Div Serong Tanpa Menggunakan Sempadan

Masalah:

Mencipta div senget menggunakan sempadan tidak boleh dilaksanakan apabila div diletakkan di atas imej. Bagaimanakah tepi senget boleh dibuat menggunakan CSS yang juga responsif?

Penyelesaian:

Elemen pseudo senget boleh digunakan untuk mencipta latar belakang senget. Pendekatan ini memastikan teks tidak terjejas oleh operasi transformasi. Begini cara untuk mencapainya:

1. Letakkan Elemen Pseudo:
   Tambahkan elemen pseudo :selepas pada div dengan kedudukan mutlak.
2. Tentukan Skew:
   Gunakan -webkit-transform: condong (-45deg); property (atau awalan vendornya) untuk memesongkan unsur pseudo sebanyak 45 darjah.
3. Tetapkan Asal Ubah:
   Tentukan asal-ubah: 100% 0; untuk membenarkan elemen pseudo condong dari sudut kanan bawah.
4. Sembunyikan Limpahan:
   Tambah limpahan: tersembunyi; kepada elemen pseudo untuk menyembunyikan bahagian yang melimpah.
5. Timbunan Di Belakang Kandungan:
   Gunakan indeks-z negatif pada elemen pseudo untuk menyusunnya di belakang kandungan div.

Contoh Kod:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

body {
  background: url("https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg");
  background-size: cover;
}

HTML:

<div>slanted div text</div>
<div>
  slanted div text<br />
  on several lines<br />
  an other line
</div>
<div>wider slanted div text with more text inside</div>

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Serong Tanpa Menggunakan Sempadan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!