Terkadang saat menyisipkan dokumen, diagonal tabel perlu digunakan. Metode yang umum adalah menggunakan gambar untuk memprosesnya, dan ada juga penggunaan vml untuk menggambar diagonal. Jawabannya ya, mari kita simulasikan diagonal sebuah tabel.
Gunakan garis batas untuk mensimulasikan garis diagonal. Kita tahu bahwa jika garis batas DIV diatur cukup lebar dan warna berbeda ditentukan, perpotongan dua garis batas yang berdekatan akan menjadi garis diagonal. Mengetahui prinsip ini, kita dapat menggunakan border-left dan border-top untuk mensimulasikan efek garis miring.
Mari kita buat strukturnya terlebih dahulu:
<div kelas="keluar">
<b>Kategori</b>
<em>Nama</em>
</div>
Kami menggunakan <div class="out"> sebagai wadah diagonal, dan kami mengatur gaya garis miring. Kode kuncinya adalah sebagai berikut:
.keluar{
border-top:40px #D6D3D6 solid;/*Lebar batas atas sama dengan tinggi baris pertama tabel*/
lebar:0px;/*Biarkan lebar wadah menjadi 0*/
tinggi:0px;/*Biarkan tinggi wadah menjadi 0*/
border-left:80px #BDBABD solid;/*Lebar border kiri sama dengan lebar sel pertama pada baris pertama tabel*/
position:relative;/*Buat kedua subkontainer di dalamnya benar-benar diposisikan*/
}
Tag <b> dan <em> digunakan untuk menyetel dua kategori, dan menyetelnya ke struktur blok masing-masing. display:block; hapus gaya font defaultnya font-style:normal; ke posisi absolut, sehingga Anda dapat mengimbanginya ke posisi yang ingin Anda tentukan.
b{gaya font:normal;tampilan:blok;posisi:mutlak;atas:-40px;kiri:-40px;lebar:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}
Garis diagonal seperti itu disimulasikan. Jika Anda mengetahui prinsipnya, Anda bisa mengubahnya menjadi banyak hal menarik.
Kekurangan metode simulasi diagonal ini:
1. Lebar dan tinggiharus
diketahui
2. Panjang lebar dan tinggi tidak boleh terlalu berbeda. Anda dapat mencoba membuat lebarnya beberapa kali lebih panjang dari tingginya untuk melihat efeknya
. Selain itu, warna garis diagonal tidak dapat diatur.
Catatan lain: Kode di atas hanya menguji ie6 dan ff3, dan browser lain tidak diuji.