Bagaimana untuk Mencipta Tepi Serong Responsif untuk Div ​​Tanpa Mengaburkan Imej Dasar?

Buat Tepi Serong Responsif untuk Div

Masalah:

Mencipta tepi senget untuk div tanpa menggunakan sempadan yang akan mengaburkan imej asas.

Penyelesaian:

Elemen Pseudo Serong:

Gunakan elemen pseudo senget untuk mencipta latar belakang senget sambil mengekalkan kandungan teks di atasnya.

Transform Origin:

Tetapkan asal transformasi unsur pseudo kepada titik anchor yang diingini untuk condong (kanan bawah sudut dalam kes ini).

Transformasi Skew:

Gunakan transformasi condong pada elemen pseudo untuk memiringkannya dengan sewajarnya (cth., -45 darjah).

Limpahan:

Gunakan limpahan: tersembunyi; untuk menyembunyikan mana-mana bahagian unsur pseudo yang melimpah.

Indeks Z Negatif:

Letakkan unsur pseudo di belakang kandungan div menggunakan indeks z negatif.

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

Hasil:

Penyelesaian ini membolehkan anda mencipta tepi senget responsif untuk div yang akan' t menjejaskan kandungan teks mereka.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tepi Serong Responsif untuk Div ​​Tanpa Mengaburkan Imej Dasar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!