triangle - ¿Cómo puedo hacer un div con formas irregulares con css3 y html5?

square css

Question

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:

Answer 1

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;
}

Answer 2

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/

Answer 3

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.

Answer 4

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:

http://css-tricks.com/examples/ShapesOfCSS/