Producción de páginas web: utilice div+css para simular diagonales de tablas

Autor：Eve Cole Fecha de actualización：2009-06-12 17:24:05

A veces, al insertar un documento, es necesario usar diagonales de tabla. El método común es usar imágenes para procesarlas, y también existe el uso de vml para dibujar diagonales. ¿Se puede lograr esto usando html + css? La respuesta es sí, simulemos la diagonal de una mesa.

Utilice líneas de borde para simular líneas diagonales. Sabemos que si la línea de borde de un DIV se establece lo suficientemente ancha y se definen diferentes colores, la intersección de dos líneas de borde adyacentes será una línea diagonal. Conociendo este principio, podemos usar border-left y border-top para simular el efecto de las barras.

Primero creemos una estructura:

Categoría
Nombre

Usamos

como contenedor diagonal y configuramos el estilo de barra diagonal. El código clave es el siguiente:
.afuera{
border-top:40px #D6D3D6 solid;/*El ancho del borde superior es igual a la altura de la primera fila de la tabla*/
width:0px;/*Deje que el ancho del contenedor sea 0*/
height:0px;/*Deje que la altura del contenedor sea 0*/
border-left:80px #BDBABD solid;/*El ancho del borde izquierdo es igual al ancho de la primera celda en la primera fila de la tabla*/
position:relative;/*Haga que los dos subcontenedores del interior estén en una posición absoluta*/
}

Las etiquetas y se utilizan para establecer dos categorías y configurarlas para bloquear estructuras respectivamente. display:block borra su estilo de fuente predeterminado font-style:normal porque el contenedor principal ha establecido un posicionamiento relativo. a posicionamiento absoluto, para que pueda desplazarlo a la posición que desea especificar.

b{estilo de fuente:normal;display:bloque;posición:absoluta;arriba:-40px;izquierda:-40px;ancho:35px;}
em{estilo de fuente:normal;display:bloque;posición:absoluta;arriba:-25px;izquierda:-70px;ancho:55x;}

Se simula una línea diagonal de este tipo. Si conoces el principio, puedes convertirlo en muchas cosas interesantes. ¡Te deseo buena suerte!

Desventajas de este método de simulación diagonal:

1. Se deben conocer el ancho y el alto

2.

La longitud del ancho y el alto no puede ser demasiado diferente. Puede intentar hacer que el ancho sea varias veces más largo que el alto para ver el efecto.

Además, no se puede establecer el color de las líneas diagonales.

Otra nota: el código anterior solo probó ie6 y ff3, y no se probaron otros navegadores.