web-dev-qa-db-fra.com

Comment puis-je faire un div avec des formes irrégulières avec css3 et html5?

Je me demande s'il existe une possibilité de construire des div avec des formes irrégulières, quelque chose de similaire à cela (par exemple le Groenland, l'Europe, l'Afrique). Je veux créer une carte comme ici en utilisant CSS3 et HTML5.

Voici un lien vers un exemple d'image:

htmlcsscss-shapes
14
Rafath

Les éléments ont toujours été rectangulaires. Néanmoins, vous pouvez simuler d'autres formes en dessinant des formes CSS dans la division rectangulaire et en organisant différentes divisions (avec z-index, etc.). Cela vous aidera à:

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

22
Navaneeth

Ce que vous avez là ressemble à une grille, que vous pouvez obtenir soit avec de nombreux dégradés sur un div, soit avec une grille de nombreux div sur laquelle vous appliquez des transformations CSS ( [~ # ~] démo [~ # ~] ).

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

Vous devriez pouvoir créer votre carte sous forme de carrés, avec tous les éléments que vous choisissez, puis envelopper le tout dans un div/span/quoi que ce soit et effectuer une transformation 3D CSS3 pour obtenir comment vous en avez besoin.

0
gazhay

si vous voulez faire des bordures irrégulières exactes, optez pour des cartes d'images HTML (toujours une meilleure solution que css et positionnement absolu), essayez ceci http://www.svennerberg.com/examples/imagemap_rollover/

0
SangeethK