Cómo dibujar un hexágono equilátero con CSS
Css dibuja un triángulo con un borde. Por ejemplo, su hexágono necesita un borde blanco y un color de fondo rojo, luego su triángulo tiene un triángulo blanco grande y un triángulo rojo pequeño que se superponen para formar un triángulo con un borde blanco.
Antes, terminé de escribir el hexágono sin bordes, pero el hexágono con bordes tuvo que revertir este método y reescribirlo. . .
Mi proyecto consta de varios hexágonos, que están colocados de forma irregular y deben colocarse para agregar un efecto de desplazamiento a los hexágonos.
Después de dibujar finalmente el hexágono, el PSD es 1920, que se considera de alta resolución. Al no poder adaptarme a pantallas con diferentes resoluciones, tuve que usar rem. Estoy usando hotcss, por lo que no necesito calcular la conversión entre px y rem yo mismo. Se ha implementado Adaptive. Para obtener detalles sobre el uso de hotcss, haga clic en este enlace: Haga clic para abrir el enlace.
ltdiv? class="nav "
ltdiv? class="hex-wrap?clearfix?hex-wrap1 "
ltdiv? class="hex-border-left? hex-border-left1? Tirar hacia la izquierda"
ltdiv? class="hex-left " > lt/div gt;
lt/div gt;
ltdiv? class="fore?fore1?Tirar hacia la izquierda" > ltAnswer? href="javascript：?void(0);" gtBig Data agrícola
ltdiv? class="hex-border-right?hex-border-right1?Tirar hacia la izquierda"
ltdiv? class="hex-right " > lt/div gt;
lt/div gt;
lt/div gt
ltdiv? class="hex-wrap?clearfix?hex-wrap2 "
ltdiv? class="hex-border-left? ¿Borde hexadecimal izquierdo 2? Tirar hacia la izquierda"
ltdiv? class="hex-left " > lt/div gt;
lt/div gt;
ltdiv? class="fore?fore2?Tirar hacia la izquierda" > ltAnswer? href="javascript:?void(0);" supervisión gtIOT
ltdiv? class="borde-hexadecimal-derecho? Borde hexadecimal-derecho 2? Tirar hacia la izquierda"
ltdiv? class="hex-right " > lt/div gt;
lt/div gt;
lt/div gt;
ltdiv? class="hex-wrap?clearfix?hex-wrap3 "
ltdiv? class="hex-border-left? ¿Borde hexadecimal izquierdo 3? Tirar hacia la izquierda"
ltdiv? class="hex-left " > lt/div gt;
lt/div gt;
ltdiv? class="fore?fore3?Tirar hacia la izquierda" > ltAnswer? href="javascript：?void(0);" gtlivestock lt/div gt;
ltdiv? class="hex-border-right? Hex border-right 3? Tirar hacia la izquierda"
ltdiv? class="hex-right " > lt/div gt;
lt/div gt;
lt/div gt;
ltdiv? class="hex-wrap?clearfix?hex-wrap4 "
ltdiv? class="hex-border-left? ¿Borde hexadecimal izquierdo 4? Tirar hacia la izquierda"
ltdiv? class="hex-left " > lt/div gt;
lt/div gt;
ltdiv? clase="fo
¿re? fore4? Tirar hacia la izquierda" > ltAnswer?href="javascript:? void(0);" gt trazabilidad de calidad
ltdiv? class="hex-border-right? Borde hexagonal: ¿correcto 4? Tirar hacia la izquierda" >>p>
ltdiv? class="hex-right " > lt/div gt;
lt/div gt;
lt/div gt ;
ltdiv? class="envoltura hexadecimal? arreglo claro? hex-wrap5 " >>p>
ltdiv?class="hex-border-left? Hexadecimal: ¿borde izquierdo 5? Tirar hacia la izquierda" >>p>
ltdiv? class="hex-left " > lt/div gt;
lt/div gt;
ltdiv? class= " ¿Delantero?" fore5? Tirar hacia la izquierda" > ltAnswer?href="javascript:? void(0);" gtPest Monitoring
ltdiv? class="hex-border-right? Borde hexagonal: ¿verdad 5? Tirar hacia la izquierda" >>p>
ltdiv? class="hex-right " > lt/div gt;
lt/div gt;
lt/div gt ;
ltdiv? class="envoltura hexadecimal? arreglo claro? hex-wrap6 " >>p>
ltdiv?class="hex-border-left? Hexadecimal: ¿borde izquierdo 6? Tirar hacia la izquierda" >>p>
ltdiv? class="hex-left " > lt/div gt;
lt/div gt;
ltdiv? class= " ¿Delantero?" fore6? Tirar hacia la izquierda" > ltAnswer?href="javascript:? void(0);" gt productos acuáticos
ltdiv? class="hex-border-right? Borde hexagonal: ¿verdad 6? Tirar hacia la izquierda" >>p>
ltdiv? class="hex-right " > lt/div gt;
lt/div gt;
lt/div gt ;
ltdiv? class="envoltura hexadecimal? arreglo claro? hex-wrap7 " >>p>
ltdiv?class="hex-border-left? Borde hexagonal: ¿izquierda 7? Tirar hacia la izquierda" >>p>
ltdiv? class="hex-left " > lt/div gt;
lt/div gt;
ltdiv? class= " ¿Delantero?" fore7? Tirar hacia la izquierda" > ltAnswer?href="javascript:? void(0);" viajes de placer
ltdiv? class="hex-border-right? Borde hexagonal: ¿verdad 7? Tirar hacia la izquierda" >>p>
ltdiv? class="hex-right " > lt/div gt;
lt/div gt;
lt/div gt ;
ltdiv? class="envoltura hexadecimal? arreglo claro? envoltura hexadecimal8 "
<p>ltdiv? class="hex-border-left? Hex border-left 8? Tirar hacia la izquierda"
ltdiv? class="hex-left " > lt/div gt;
lt/div gt;
ltdiv? class="fore?fore8?Tirar hacia la izquierda" > ltAnswer? href="javascript:?void(0);" gt comercio electrónico
ltdiv? class="borde-hexadecimal-derecho? Borde hexadecimal-derecho 8? Tirar hacia la izquierda"
ltdiv? class="hex-right " > lt/div gt;
lt/div gt;
lt/div gt
lt/div gt; /p>
Código CSS:
[css]? ¿Punto de vista? ¿aburrido? ¿Copiar? ¿Imprimir?
/*?8 estilos de navegación? */
. ¿contenido? . ¿navegación? {
Flotante:? Sí;
Ancho:? 750px
Posición:? Relativo;
}
. ¿Envoltorio hexagonal? {
Ubicación:? Absoluto;
Cursor:? Puntero;
}
. envoltura hexagonal1? {
Izquierda:? 170 px;
arriba:? 0px
}
. ¿Paquete hexagonal 2? {
Izquierda:? 90px
arriba:? 148 píxeles;
}
. ¿Envoltorio hexagonal 3? {
Izquierda:? 0px
arriba:? 296px
}
. ¿Embalaje hexagonal 4? {
Izquierda:? 300px
arriba:? 94px
}
. envoltura hexagonal5? {
Izquierda:? 215px;
arriba:? 242px
}
. ¿Embalaje hexagonal 6? {
Izquierda:? 516px;
arriba:? 27px
}
. ¿Embalaje hexagonal 7? {
Izquierda:? 435px
arriba:? 175px;
}
. ¿Embalaje hexagonal 8? {
Izquierda:? 348px
arriba:? 323px
}
. ¿delantero? {
/* ¿Dibujar una imagen con un ancho de 80 px y una altura de 136 px? */Rectángulo
Ancho:? 80px
Altura:? 136 px;
Alineación del texto:? Centrado;
Posición:? Relativo;
Tamaño de fuente:? 24px
Borde superior:? 1px? ¿sólido? # dfe8f2
Borde inferior:? 1px? ¿sólido? #dfe8f2
}
. Hexadecimal: ¿borde izquierdo? {
Ubicación:? Relativo;
Contenido:? "";
Ancho:? 0;
Altura:? 0;
Borde superior:? ¿69 píxeles? ¿sólido? Transparente;
Borde-Inferior:? ¿69px? ¿sólido? Transparente;
}
.
¿Hexágono izquierdo? {
/*El triángulo de la izquierda*/
Contenido:? "";
Ancho:? 0;
Altura:? 0;
Borde superior:? ¿68px? ¿sólido? Transparente;
Borde-Inferior:? ¿68px? ¿sólido? Transparente;
Posición:? Absolutamente;
Izquierda:? 1px;
arriba:? -68px;
}
. ¿Es correcto el borde hexadecimal? {
Ubicación:? Relativo;
Contenido:? "";
Ancho:? 0;
Altura:? 0;
Borde superior:? ¿69px? ¿sólido? Transparente;
Borde-Inferior:? ¿69px? ¿sólido? Transparente;
}
. Hexágono, ¿verdad? {
/*Triángulo a la derecha*/
Contenido:? "";
Ancho:? 0;
Altura:? 0;
Borde superior:? ¿68px? ¿sólido? Transparente;
Borde-Inferior:? ¿68px? ¿sólido? Transparente;
Posición:? Absolutamente;
Cierto:? 1px;
arriba:? -68px;
}
. ¿delantero? ¿respuesta? {
Color:? # fff
Texto-decoración:? Ninguno;
Cursor:? Puntero;
Posición:? Absoluto;
En blanco:? nowrap
Ancho:? 150 px;
Alineación del texto:? Centrado;
Pantalla:? Escudo;
arriba:? 50px
Izquierda:? -35px;
índice z:? 99;
}
. Hexadecimal: ¿borde izquierdo? {
Borde derecho:? ¿41 píxeles? ¿sólido? #fff
}
. ¿Es correcto el borde hexadecimal? {
Borde izquierdo:? ¿41 píxeles? ¿sólido? #fff
}
. {
Color de fondo:? #3498db
}
. borde-hexadecimal-izquierda1? . ¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? #3498db
}
. borde-hexadecimal-derecho1? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? #3498db
}
fore2? {
Color de fondo:? #1 ABC 9c;
}
. Hexadecimal: ¿borde izquierdo 2? . ¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? #1 ABC 9c;
}
. Borde hexagonal: ¿derecho 2? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? # 1 ABC 9 c;
}
. {
Color de fondo:? # f 1c40f;
}
. Hexadecimal: ¿borde izquierdo 3? . ¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? # f 1c40f;
}
. Borde hexagonal: ¿verdad 3? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? # f 1c40f;
}
. {
Color de fondo:? #9b59b6
}
. Hexadecimal: ¿borde izquierdo 4? .
¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? #9b59b6
}
. Borde hexagonal: ¿correcto 4? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? # 9b59b6
}
. {
Color de fondo:? #95a5a6
}
. Hexadecimal: ¿borde izquierdo 5? . ¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? #95a5a6
}
. Borde hexagonal: ¿verdad 5? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? # 95a5a6
}
. {
Color de fondo:? #e74c3c
}
. Hexadecimal: ¿borde izquierdo 6? . ¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? #e74c3c
}
. Borde hexagonal: ¿verdad 6? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? #e74c3c
}
. {
Color de fondo:? #2ecc 71;
}
. Borde hexagonal: ¿izquierda 7? . ¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? #2ecc 71;
}
. Borde hexagonal: ¿verdad 7? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? # 2ecc 71;
}
. {
Color de fondo:? #e67e22
}
. Borde hexagonal: ¿izquierdo 8? . ¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? #e67e22
}
. Borde hexagonal: ¿verdad 8? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? #e67e22
}
. hex-wrap1: ¿flotar? .ante1? {
Color de fondo:? # 39B0FF
Borde superior:? 1px? ¿sólido? # 39B0FF
Borde inferior:? 1px? ¿sólido? #39B0FF
}
. hex-wrap1: ¿flotar? . borde-hexadecimal-izquierda1? {
Borde derecho:? ¿41 píxeles? ¿sólido? #39B0FF
}
. hex-wrap1: ¿flotar? . borde-hexadecimal-derecho1? {
Borde izquierdo:? ¿41 píxeles? ¿sólido? #39B0FF
}
. hex-wrap1: ¿flotar? . ¿Hexágono izquierdo? {
Borde derecho:? ¿40 píxeles? ¿sólido? #39B0FF
}
. hex-wrap1: ¿flotar? . Hexágono, ¿verdad? {
Borde izquierdo:? ¿40 píxeles? ¿sólido? #39B0FF
}