Às vezes, ao inserir um documento, é necessário usar diagonais de tabela. O método comum é usar imagens para processá-los, e também há o uso de vml para desenhar diagonais. A resposta é sim, vamos simular a diagonal de uma mesa.
Use linhas de borda para simular linhas diagonais Sabemos que se a linha de borda de um DIV for larga o suficiente e cores diferentes forem definidas, a interseção de duas linhas de borda adjacentes será uma linha diagonal. Conhecendo este princípio, podemos usar border-left e border-top para simular o efeito de barras.
Vamos primeiro criar uma estrutura:
Usamos
As tags e são usadas para definir duas categorias e defini-las para bloquear estruturas respectivamente, então configure; para posicionamento absoluto, para que você possa deslocá-lo para a posição que deseja especificar.
b{estilo de fonte:normal;display:bloco;posição:absoluta;topo:-40px;esquerda:-40px;largura:35px;}
em{estilo de fonte:normal;display:bloco;posição:absoluta;topo:-25px;esquerda:-70px;largura:55x;}
Essa linha diagonal é simulada. Se você conhece o princípio, poderá transformá-lo em muitas coisas interessantes. Desejo-lhe boa sorte!
Desvantagens deste método de simulação diagonal:
1. A largura e a altura devemser
conhecidas
2. O comprimento da largura e da altura não pode ser muito diferente.
Além disso, a cor das linhas diagonais não pode ser definida.
Outra observação: o código acima testou apenas ie6 e ff3, e outros navegadores não foram testados.