Webseitenerstellung: Verwenden Sie div+css, um Tabellendiagonalen zu simulieren

Autor：Eve Cole Aktualisierungszeit：2009-06-12 17:24:05

Manchmal müssen beim Einfügen eines Dokuments Tabellendiagonalen verwendet werden. Die übliche Methode besteht darin, Bilder zu verwenden, um sie zu verarbeiten, und es gibt auch die Verwendung von VML zum Zeichnen von Diagonalen. Kann dies mit HTML + CSS erreicht werden? Die Antwort lautet: Ja, simulieren wir die Diagonale eines Tisches.

Verwenden Sie Grenzlinien, um diagonale Linien zu simulieren. Wir wissen, dass der Schnittpunkt zweier benachbarter Grenzlinien eine diagonale Linie ist, wenn die Grenzlinie eines DIV breit genug eingestellt ist und unterschiedliche Farben definiert sind. Wenn wir dieses Prinzip kennen, können wir „border-left“ und „border-top“ verwenden, um die Wirkung von Schrägstrichen zu simulieren.

Erstellen wir zunächst eine Struktur:

Kategorie
Name

Wir verwenden

als diagonalen Container und legen den Schrägstrichstil fest. Der Schlüsselcode lautet wie folgt:
.aus{
border-top:40px #D6D3D6 solid;/*Die Breite des oberen Randes entspricht der Höhe der ersten Zeile der Tabelle*/
width:0px;/*Die Containerbreite sei 0*/
height:0px;/*Die Containerhöhe sei 0*/
border-left:80px #BDBABD solid;/*Die Breite des linken Randes entspricht der Breite der ersten Zelle in der ersten Zeile der Tabelle*/
position:relative;/*Machen Sie die beiden Untercontainer darin absolut positioniert*/
}

- und -Tags werden verwendet, um zwei Kategorien festzulegen und sie auf Blockstrukturen einzustellen. display:block; Löschen Sie ihren Standardschriftstil, da der übergeordnete Container die relative Positionierung festgelegt hat Es wird auf absolute Positionierung umgestellt, sodass Sie es auf die gewünschte Position versetzen können.

b{font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}

Eine solche diagonale Linie wird simuliert. Wenn Sie das Prinzip kennen, können Sie daraus viele interessante Dinge machen. Ich wünsche Ihnen viel Glück!

Nachteile dieser diagonalen Simulationsmethode:

1. Die Breite und Höhe müssen bekannt sein.

2. Die Länge der Breite und Höhe darf nicht zu unterschiedlich sein. Sie können versuchen, die Breite um ein Vielfaches größer zu machen als die

Höhe Außerdem kann die Farbe der diagonalen Linien nicht eingestellt werden.

Noch ein Hinweis: Der obige Code hat nur ie6 und ff3 getestet, andere Browser wurden nicht getestet.