À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:
<div class="fora">
<b>Categoria</b>
<em>Nome</em>
</div>
Usamos <div class="out"> como contêiner diagonal e definimos o estilo da barra. O código-chave é o seguinte:
.fora{
border-top:40px #D6D3D6 solid;/*A largura da borda superior é igual à altura da primeira linha da tabela*/
width:0px;/*Deixe a largura do contêiner ser 0*/
height:0px;/*Deixe a altura do contêiner ser 0*/
border-left:80px #BDBABD solid;/*A largura da borda esquerda é igual à largura da primeira célula na primeira linha da tabela*/
position:relative;/*Torna os dois subcontêineres dentro absolutamente posicionados*/
}
As tags <b> e <em> 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.