Você pode ver a caixa com setas como mostrado na figura acima. Esta seta pode ser realizada através de imagens de fundo ou CSS. Este artigo apresenta três caixas rápidas com setas através do CSS.
1. Passe o atributo de fronteira
Ideia: Dois triângulos, os dois triângulos são diferentes de 1px como borda por posicionamento.
2.CSS3 Transform
Ideia: primeiro faça um quadrado com a mesma cor em dois lados e depois gire -a para um certo ângulo para torná -lo um triângulo.
3. Personagens especiais '♦'
Pensamento: a primeira metade dos personagens especiais vazou e eles parecem triângulos
1. Passe o atributo de fronteira:
Vamos primeiro fazer uma div com largura e altura de 10px, e a borda também é 10px.
Largura: 10px; Altura: 10px; borda: 10px sólido; cor de borda: azul amarelo verde vermelho;
Como mostrado na figura abaixo:
O espaço em branco no meio da imagem é a largura e a altura que definimos. Se estiver definido como 0px, o que acontecerá? , como mostrado abaixo:
Neste momento, podemos definir as cores das bordas esquerda e inferior para serem transparentes ou da mesma cor da cor do fundo, e o triângulo que queremos será lançado. Como mostrado na figura abaixo:
Agora vamos alcançar o efeito na primeira foto:
CSS:
.info {margin-top: 50px; Posição: relativa; Largura: 200px; Altura: 50px; altura da linha: 60px; Antecedentes:#f6f1b3; Box-Shadow: 1px 2px 3px #e9d985; Border: 1px Solid #DACE7C; Radio de fronteira: 4px; Alinhamento de texto: centro; Cor: vermelho; } .nav {Position: Absolute; Esquerda: 30px; estouro: oculto; largura: 0; altura: 0; largura de fronteira: 10px; estilo de borda: tracejada tracejada sólida; } .nav-border {top: -20px; cor de borda: transparente transparente #dace7c transparente; } .nav-background {top: -19px; cor de borda: transparente transparente #f6f1b3 transparente; }html:
<div> <pan> Mensagem de prompt
2. CSS3 Transform
Primeiro, criamos uma caixa div com duas fronteiras adjacentes com a mesma cor e as outras duas fronteiras com 0px. Como mostrado na imagem:
Gire a caixa em 45 graus para obter o efeito rápido do triângulo.
CSS:
.info {margin-top: 50px; Posição: relativa; Largura: 200px; Altura: 50px; altura da linha: 60px; Antecedentes:#f6f1b3; Box-Shadow: 1px 2px 3px #e9d985; Border: 1px Solid #DACE7C; Radio de fronteira: 4px; Alinhamento de texto: centro; Cor: vermelho; } .nav {Position: Absolute; topo: -8px; Esquerda: 30px; estouro: oculto; Largura: 13px; Altura: 13px; Antecedentes:#f6f1b3; Border-Ift: 1px Solid #DACE7C; Top de borda: 1px Solid #DACE7C; -webkit-transform: girate (45deg); -moz-transform: girar (45deg); -o-transform: girate (45deg); Transformar: girar (45deg); }html:
<div> <pan> Mensagem de prompt </span> <div> </div> </div>
3. Personagens especiais '♦'
'♦' é um personagem especial, equivalente a um personagem, portanto o tamanho é definido através do tamanho da fonte para alcançar o efeito da primeira foto:
CSS:
.info {margin-top: 50px; Posição: relativa; Largura: 200px; Altura: 50px; altura da linha: 60px; Antecedentes:#f6f1b3; Box-Shadow: 1px 2px 3px #e9d985; Border: 1px Solid #DACE7C; Radio de fronteira: 4px; Alinhamento de texto: centro; Cor: vermelho; } .nav {Position: Absolute; Esquerda: 30px; estouro: oculto; Largura: 24px; Altura: 24px; Fonte: Normal 24px "Microsoft Yahei"; } .nav-border {top: -17px; Cor:#DACE7C; } .nav-background {top: -16px; Cor:#f6f1b3; }html:
<div> <pan> Mensagem de prompt
Abaixo está uma demonstração compatível com o IE5.5+, Chrome, Firfox e outros navegadores. Se você o usar, poderá levar o exame diretamente para o seu próprio projeto.
<! Doctype html> <html> <head> <title> </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <estilo> div.container {Position: absoluta; TOP: 30px; Esquerda: 40px; tamanho de fonte: 9pt; exibição: bloco; Altura: 100px; Largura: 200px; Background-Color: transparente; *Border: 1px Solid #666; } s {posição: absoluto; topo: -20px; *TOP: -22PX; Esquerda: 20px; exibição: bloco; altura: 0; largura: 0; tamanho de fonte: 0; altura da linha: 0; cor de borda: transparente transparente nº 666 transparente; estilo de borda: tracejada sólida tracejada tracejada; largura de fronteira: 10px; } i {posição: absoluto; topo: -9px; *TOP: -9px; Esquerda: -10px; exibição: bloco; altura: 0; largura: 0; tamanho de fonte: 0; altura da linha: 0; cor de borda: transparente transparente transparente transparente; estilo de borda: tracejada sólida tracejada tracejada; largura de fronteira: 10px; } .Content {Border: 1px Solid #666; -Moz-Border-Radius: 3px; -Webkit-Border-Radius: 3px; Posição: Absoluto; Background-Color: #FFF; largura: 100%; Altura: 100%; preenchimento: 5px; *TOP: -2px; *Border-top: 1px Solid #666; *Border-top: 1px Solid #666; *Border-top: 1px sólido *borda-esquerda: nenhum; *Right-Right: Nenhum; *Altura: 102px; Shadow de caixa: 3px 3px 4px; -moz-box-shadow: 3px 3px 4px; -webkit-box-shadow: 3px 3px 4px; / * Para o IE 5.5 - 7 */ filtro: progid: dximageTransform.microsoft.shadow (força = 4, direção = 135, color = '#999999'); / * Para o IE 8 */ -ms -filter: "Progid: dIMAGETRANSForm.microsoft.shadow (força = 4, direção = 135, color = '#999999')"; } </style> </head> <body> <div> <div> <div> Olá, mundo! </div> <s> <i> </i> </s> </div> </body> </html>Imagem de reprodução:
resumo:
A caixa de prompt com setas traz bons resultados para a interação do usuário. Este artigo apresenta três métodos. Se você tem outros métodos para @Me, eu ficaria muito agradecido. Espero que este artigo possa ajudá -lo.