Red de conocimiento informático - Material del sitio web - Cómo dibujar un hexágono equilátero con CSS

Cómo dibujar un hexágono equilátero con CSS

Primero, mi idea es que un hexágono se compone de un rectángulo y dos triángulos.

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

}