Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencapai Tepi Serong pada Div Menggunakan Elemen Pseudo Serong?
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.
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.
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; }
<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!