Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Membuat Div Serong Tanpa Menggunakan Sempadan dalam CSS?

Bagaimana untuk Membuat Div Serong Tanpa Menggunakan Sempadan dalam CSS?

Susan Sarandon
Susan Sarandonasal
2024-11-11 08:08:03203semak imbas

How to Create a Slanted Div Without Using Borders in CSS?

Membuat Div Serong Tanpa Menggunakan Sempadan

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:

  1. Letakkan Elemen Pseudo:
    Tambahkan elemen pseudo :selepas pada div dengan kedudukan mutlak.
  2. Tentukan Skew:
    Gunakan -webkit-transform: condong (-45deg); property (atau awalan vendornya) untuk memesongkan unsur pseudo sebanyak 45 darjah.
  3. Tetapkan Asal Ubah:
    Tentukan asal-ubah: 100% 0; untuk membenarkan elemen pseudo condong dari sudut kanan bawah.
  4. Sembunyikan Limpahan:
    Tambah limpahan: tersembunyi; kepada elemen pseudo untuk menyembunyikan bahagian yang melimpah.
  5. Timbunan Di Belakang Kandungan:
    Gunakan indeks-z negatif pada elemen pseudo untuk menyusunnya di belakang kandungan div.

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!

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