Código para implementar ícone de seta simples usando div+CSS em HTML

Em web design, costumamos usar algumas setas como decoração para embelezar nossas páginas da web. Embora muitos designers de sites agora gostem de usar ícones de fontes para obter o efeito de setas, isso também terá algum impacto no carregamento das páginas da web. Hoje, o editor do Feiniao Muyu vai lhe ensinar como usar div e CSS para obter alguns efeitos de seta em web design.

Em alguns menus de navegação secundários ou listas com funções suspensas em páginas da web, haverá algumas pequenas setas implementadas para indicar que um DIV contém conteúdo. Então, como implementamos o estilo dessas pequenas setas?

Primeiro coloque o código CSS

 /*Seta para cima*/.to_top { largura: 0; altura da borda: 10px sólido #ccc; borda esquerda: 10px sólido transparente;}/*Seta para baixo*/ . to_bottom {largura: 0; altura: 0; borda superior: 10px sólido #ccc; 10px sólido transparente;}/*seta para a esquerda*/.to_left { largura: 0; borda direita: 10px sólido #ccc; / *Seta para a direita*/ .to_right { largura: 0; altura: 0; borda esquerda: 10px sólido #cccf; transparente; borda inferior: 10px sólido transparente;}

Código HTML

 <p>Seta para cima</p><div class=to_top></div><p>Seta para a esquerda</p><div class=to_left></div><p>Seta para a direita</p>< div class =to_right></div><p>Seta para baixo</p><div class=to_bottom></div>

Resultados de execução de código

Se você achar que a seta é muito grande ou muito pequena e a cor não é a desejada, podemos ajustar o tamanho da seta ajustando a espessura e a cor da borda DIV.

Ao modificar o tema de três colunas ontem, alguns usuários relataram que uma grande seta para a esquerda e para a direita deveria ser adicionada. Embora seja muito simples de implementar (você pode usar uma imagem de fundo), mas você precisa adicionar uma função de fundo que possa personalizar a cor, então pensei em usar DIV + CSS para desenhar setas, para que você possa personalizar facilmente o cor das setas.

Código CSS

 .text{ display: bloco embutido; borda superior: 2px sólido; margem direita: 2px largura: 100px; cor da borda: #EA6000; automático 100px;}

Código HTML

<span class=text></span>

Resultados de execução de código

Podemos alterar o número de setas modificando o código abaixo de C, ou podemos modificar a largura e a altura para alterar o tamanho da seta.

transform: rotate(-135deg);/*调整旋转的角度*/

O código acima é o que o editor apresenta para você usar div + CSS para implementar um ícone de seta simples em HTML. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá. para você a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!

Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!