Parfois, lors de l'insertion d'un document, les diagonales des tableaux doivent être utilisées. La méthode courante consiste à utiliser des images pour les traiter, et il existe également l'utilisation de vml pour dessiner des diagonales. Cela peut-il être réalisé en utilisant html+css ? La réponse est oui, simulons la diagonale d'un tableau.
Utilisez des lignes de bordure pour simuler des lignes diagonales. Nous savons que si la ligne de bordure d'un DIV est suffisamment large et que différentes couleurs sont définies, l'intersection de deux lignes de bordure adjacentes sera une ligne diagonale. Connaissant ce principe, nous pouvons utiliser border-left et border-top pour simuler l'effet des barres obliques.
Créons d'abord une structure :
<div class="out">
<b>Catégorie</b>
<em>Nom</em>
</div>
Nous utilisons <div class="out"> comme conteneur diagonal et nous définissons le style de barre oblique. Le code clé est le suivant :
.dehors{
border-top:40px #D6D3D6 solid;/*La largeur de la bordure supérieure est égale à la hauteur de la première ligne du tableau*/
width:0px;/*Laissez la largeur du conteneur être 0*/
height:0px;/*Que la hauteur du conteneur soit de 0*/
border-left:80px #BDBABD solid;/*La largeur de la bordure gauche est égale à la largeur de la première cellule de la première ligne du tableau*/
position:relative;/*Rendre les deux sous-conteneurs à l'intérieur absolument positionnés*/
}
Les balises <b> et <em> sont utilisées pour définir deux catégories et les définir respectivement pour bloquer les structures display:block; effacent leur style de police par défaut font-style:normal car le conteneur parent a défini un positionnement relatif, donc défini. au positionnement absolu, afin que vous puissiez le décaler vers la position que vous souhaitez spécifier.
b{style de police :normal;affichage:bloc;position:absolue;haut:-40px;gauche:-40px;largeur:35px;}
em{font-style:normal;display:block;position:absolute;top:-25px;gauche:-70px;width:55x;}
Une telle ligne diagonale est simulée. Si vous connaissez le principe, vous pouvez le transformer en beaucoup de choses intéressantes. Je vous souhaite bonne chance !
Inconvénients de cette méthode de simulation diagonale :
1. La largeur et la hauteur doivent être connues.
2. La longueur de la largeur etde
la hauteur ne peut pas être trop différente. Vous pouvez essayer de rendre la largeur plusieurs fois plus longue que la hauteur pour voir l'effet.
. De plus, la couleur des lignes diagonales ne peut pas être définie.
Autre remarque : le code ci-dessus n'a testé que ie6 et ff3, et les autres navigateurs n'ont pas été testés.