Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencapai Tepi Serong pada Div Menggunakan Elemen Pseudo Serong?

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

DDD
DDDasal
2024-11-13 05:44:02384semak imbas

How to Achieve a Slanted Edge on a Div Using a Skewed Pseudo Element?

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!

Kenyataan:
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