Rumah > Artikel > hujung hadapan web > Bagaimana untuk Membuat Div Serong Tanpa Menggunakan Sempadan dalam CSS?
Masalah:
Mencipta div senget menggunakan sempadan tidak boleh dilaksanakan apabila div diletakkan di atas imej. Bagaimanakah tepi senget boleh dibuat menggunakan CSS yang juga responsif?
Penyelesaian:
Elemen pseudo senget boleh digunakan untuk mencipta latar belakang senget. Pendekatan ini memastikan teks tidak terjejas oleh operasi transformasi. Begini cara untuk mencapainya:
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; }
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 Membuat Div Serong Tanpa Menggunakan Sempadan dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!