triangle - ¿Cómo puedo hacer un div con formas irregulares con css3 y html5?
square css (4)
Me pregunto si existe alguna posibilidad de construir div con formas irregulares, algo similar a esto (por ejemplo, Groenlandia, Europa, África). Quiero crear un mapa como aquí usando CSS3 y HTML5.
Aquí hay un enlace a una imagen de ejemplo:
Lo que tienes allí parece una cuadrícula, que puedes obtener con muchos degradados en un div, ya sea con una cuadrícula de muchos divs en los que aplicas transformaciones CSS ( DEMO ).
HTML:
<div class=''container''>
<div class=''grid''>
<div class=''grid-row''>
<div class=''grid-cell''></div>
<div class=''grid-cell high''></div>
<!-- and so on... -->
CSS:
div { box-sizing: border-box; }
.container {
overflow: hidden;
width: 32em;
height: 32em;
margin: 5.6em auto 0;
background: silver;
}
.grid {
transform: skewX(-45deg)
rotate(15deg)
scaleX(1.785) scaleY(.8)
translateX(-4.5em) translateY(-3em);
}
.grid-row {
width: 32em;
height: 2em;
}
.grid-cell {
float: left;
width: 2em;
height: 2em;
}
.high {
background: gainsboro;
}
.high:hover {
background: whitesmoke;
}
si desea que se hagan bordes irregulares exactos, vaya a mapas de imágenes HTML (sigue siendo una mejor solución que css y posicionamiento absoluto), intente esto http://www.svennerberg.com/examples/imagemap_rollover/
Deberías poder crear tu mapa como cuadrados, con los elementos que elijas, y luego envolver todo en un div / span / lo que sea y realizar una transformación css3 3d para obtenerlo como lo necesites.
Los elementos siempre han sido rectangulares. Aún así, puede simular otras formas dibujando formas CSS dentro de la división rectangular y organizando divisiones diferentes (con índice Z, etc.). Esto te ayudara: