Bagaimana untuk Mencapai Tepi Serong pada Div Menggunakan Elemen Pseudo Serong?

Mencipta Tepi Serong pada Div

Pengenalan

Mencapai kelebihan senget pada div menggunakan CSS boleh mencabar, terutamanya apabila menyasarkan penyelesaian responsif. Topik ini telah dibincangkan sebelum ini, tetapi mari kita teroka pendekatan alternatif.

Menggunakan Elemen Pseudo Serong

Untuk mencipta latar belakang senget, kita boleh menggunakan elemen pseudo senget. Ini membolehkan kami memastikan teks tidak terjejas oleh sifat transformasi.

Harta asal ubah meletakkan kedudukan condong elemen pseudo dari sudut kanan bawah, manakala limpahan:tersembunyi; menyembunyikan bahagian yang melimpah. Akhir sekali, indeks z negatif meletakkan elemen pseudo di belakang kandungan div.

Pelaksanaan CSS

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

Penggunaan 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 Mencapai Tepi Serong pada Div Menggunakan Elemen Pseudo Serong?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!