Как я могу сделать div с нерегулярными фигурами css3 и html5?

Мне интересно, есть ли возможность построить div с неправильной формой, что-то похожее на это (например, в Гренландии, Европе, Африке). Я хочу создать карту, как здесь, используя CSS3 и HTML5.

Вот ссылка на пример изображения:

Ответ 1

Элементы всегда были прямоугольными. Тем не менее, вы можете моделировать другие фигуры, рисуя фигуры CSS в прямоугольном подразделении и размещая различные деления (с z-индексом и т.д.). Это поможет вам:

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

Ответ 2

То, что у вас есть, похоже на сетку, которую вы можете получить либо со многими градиентами на div, либо с сеткой из многих div, на которые вы применяете 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;
}

Ответ 3

если вы хотите, чтобы были сделаны точные нерегулярные границы, идите на карты изображений HTML (все еще лучшее решение, чем css и абсолютное позиционирование), попробуйте http://www.svennerberg.com/examples/imagemap_rollover/

Ответ 4

Вы должны иметь возможность создать свою карту в виде квадратов, с любыми элементами, которые вы выберете, и затем обернуть все это в div/span/whatever и выполнить 3d-преобразование css3, чтобы получить его, как вам это нужно.