Bagaimana untuk Mencipta Div Serong dengan Teks Hanya Menggunakan CSS?

Mencipta Tepi Serong ke Div

Anda berusaha untuk membuat div senget yang menggabungkan teks tanpa menggunakan sempadan. Untuk mencapai matlamat ini, kod CSS berikut boleh digunakan:

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

Penjelasan:

• Elemen pseudo senget digunakan untuk mencipta latar belakang senget, menghalang teks daripada dipengaruhi oleh penjelmaan.
• Sifat asal transformasi membolehkan elemen pseudo menjadi senget dari sudut kanan bawah.
• Limpahan:tersembunyi; menyembunyikan bahagian melimpah unsur pseudo.
• Teks disusun di belakang latar belakang menggunakan indeks z negatif.

Contoh Penggunaan:

<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 Mencipta Div Serong dengan Teks Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!