Puede ver el cuadro con flechas como se muestra en la imagen de arriba. Esta flecha se puede realizar a través de imágenes de fondo o CSS. Este artículo presenta tres cuadros de inmediato con flechas a través de CSS.
1. Pase el atributo fronterizo
Idea: dos triángulos, los dos triángulos son diferentes de 1px como el borde por posicionamiento.
2.CSS3 Transform
Idea: primero haga un cuadrado con el mismo color en dos lados, y luego gire a cierto ángulo para que sea un triángulo.
3. Caracteres especiales '♦'
Pensamiento: la primera mitad de los caracteres especiales se filtran y parecen triángulos
1. Pase el atributo fronterizo:
Primero hagamos un DIV con ancho y altura de 10px, y el borde también es de 10 px.
Ancho: 10px; Altura: 10px; borde: 10px sólido; color de borde: rojo verde amarillo azul;
Como se muestra en la figura a continuación:
El blanco en el medio de la imagen es el ancho y la altura que establecemos. Si está configurado en 0px, ¿qué pasará? , como se muestra a continuación:
En este momento, podemos establecer los colores de los bordes izquierdo e inferior para que sean transparentes o del mismo color que el color de fondo, y el triángulo que queremos saldrá. Como se muestra en la figura a continuación:
Ahora logremos el efecto en la primera imagen:
CSS:
.info {margin-top: 50px; Posición: relativo; Ancho: 200px; Altura: 50px; Alganche de línea: 60px; Antecedentes:#F6F1B3; Shadow de caja: 1px 2px 3px #E9D985; borde: 1px sólido #dace7c; Border-Radius: 4px; Text-Align: Center; Color: rojo; } .nav {posición: absoluto; Izquierda: 30px; desbordamiento: oculto; Ancho: 0; Altura: 0; ancho fronterizo: 10px; estilo borde: sólido discurso discontinuo discontinuo; } .nav-border {top: -20px; color de borde: transparente transparente #dace7c transparente; } .nav-background {top: -19px; color de borde: transparente transparente #F6F1B3 transparente; }HTML:
<div> <span> mensaje de inmediato </span> <div> </div> <div> </div> </div>
2. CSS3 Transform
Primero hacemos un cuadro Div con dos bordes adyacentes con el mismo color y las otras dos bordes con 0px. Como se muestra en la imagen:
Gire la caja en 45 grados para lograr el efecto de inmediato del triángulo.
CSS:
.info {margin-top: 50px; Posición: relativo; Ancho: 200px; Altura: 50px; Alganche de línea: 60px; Antecedentes:#F6F1B3; Shadow de caja: 1px 2px 3px #E9D985; borde: 1px sólido #dace7c; Border-Radius: 4px; Text-Align: Center; Color: rojo; } .nav {posición: absoluto; arriba: -8px; Izquierda: 30px; desbordamiento: oculto; Ancho: 13px; Altura: 13px; Antecedentes:#F6F1B3; Border-izquierda: 1px Solid #DACE7C; Border-Top: 1px Solid #DACE7C; -WebKit-Transform: Rotate (45deg); -Moz-Transform: Rotate (45deg); -O-transform: girar (45deg); transformar: girar (45deg); }HTML:
<div> <span> mensaje de inmediato </span> <div> </div> </div>
3. Caracteres especiales '♦'
'♦' es un personaje especial, que es equivalente a un personaje, por lo que el tamaño se establece a través del tamaño de la fuente para lograr el efecto de la primera imagen:
CSS:
.info {margin-top: 50px; Posición: relativo; Ancho: 200px; Altura: 50px; Alganche de línea: 60px; Antecedentes:#F6F1B3; Shadow de caja: 1px 2px 3px #E9D985; borde: 1px sólido #dace7c; Border-Radius: 4px; Text-Align: Center; Color: rojo; } .nav {posición: absoluto; Izquierda: 30px; desbordamiento: oculto; Ancho: 24px; Altura: 24px; fuente: Normal 24px "Microsoft Yahei"; } .nav-border {top: -17px; Color:#dace7c; } .nav-background {top: -16px; Color:#F6F1B3; }HTML:
<div> <span> mensaje de inmediato </span> <div> ♦ </div> <div> ♦ </div> </div>
A continuación se muestra una demostración que es compatible con IE5.5+, Chrome, Firfox y otros navegadores. Si lo usa, puede llevar directamente el examen a su propio proyecto.
<! DOCTYPE HTML> <html> <fead> <title> </title> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <syle> div.container {posición: absoluta; arriba: 30px; Izquierda: 40px; tamaño de fuente: 9pt; Pantalla: bloque; Altura: 100px; Ancho: 200px; Color de fondo: transparente; *Border: 1px Solid #666; } S {posición: absoluto; arriba: -20px; *arriba: -22px; Izquierda: 20px; Pantalla: bloque; Altura: 0; Ancho: 0; tamaño de fuente: 0; Línea de altura: 0; color de borde: transparente transparente #666 transparente; Estilo de borde: discontinuo sólido discontinuo; ancho fronterizo: 10px; } i {posición: absoluta; arriba: -9px; *arriba: -9px; Izquierda: -10px; Pantalla: bloque; Altura: 0; Ancho: 0; tamaño de fuente: 0; Línea de altura: 0; color de borde: transparente transparente #fff transparente; Estilo de borde: discontinuo sólido discontinuo; ancho fronterizo: 10px; } .content {borde: 1px sólido #666; -Moz-Border-Radius: 3px; -WebKit-Border-Radius: 3px; Posición: Absoluto; Color de fondo: #fff; Ancho: 100%; Altura: 100%; relleno: 5px; *arriba: -2px; *Border-Top: 1px Solid #666; *Border-Top: 1px Solid #666; *border-top: 1px sólido *borde-izquierda: ninguno; *Border-Right: Ninguno; *Altura: 102px; Shadow de caja: 3px 3px 4px; -Moz-box-shadow: 3px 3px 4px; -webkit-box-shadow: 3px 3px 4px; / * Para IE 5.5 - 7 */ Filtro: progid: dximagetransform.microsoft.shadow (fuerza = 4, dirección = 135, color = '#999999'); / * Para IE 8 */ -ms -filter: "Progid: dximagetransform.microsoft.shadow (fortaleza = 4, direction = 135, color = '#999999')"; } </style> </head> <body> <div> <div> <div> ¡Hello World! </div> <s> <i> </i> </s> </div> </body> </html>Imagen de reproducción:
resumen:
El cuadro de solicitud con flechas trae buenos resultados a la interacción del usuario. Este artículo presenta tres métodos. Si tiene otros métodos para @me, estaría muy agradecido. Espero que este artículo pueda ayudarlo.