web-dev-qa-db-ja.com

css3とhtml5で不規則な形状のdivを作成するにはどうすればよいですか？

これに似た不規則な形のdivを作成する可能性はあるのでしょうか（たとえば、グリーンランド、ヨーロッパ、アフリカ）。 CSS3とHTML5を使用して、このようなマップを作成したいと思います。

ここにサンプル画像へのリンクがあります：

htmlcsscss-shapes
14
Rafath

要素は常に長方形でした。それでも、長方形の分割内にCSS図形を描画し、さまざまな分割を（z-indexなどで）配置することにより、他の図形をシミュレートできます。これはあなたを助けるでしょう：

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

22
Navaneeth

あなたが持っているものはグリッドのように見えます。これは、divに多くのグラデーションを使用して、またはCSS変換を適用する多くのdivのグリッドを使用して取得できます（ [〜 ＃〜] 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;
}
36
Ana

選択した要素を使用して、正方形としてマップを作成し、全体をdiv/span/whateverでラップし、css3 3d変換を実行して、必要な方法でそれを取得できます。

0
gazhay

不規則な境界を正確に作成したい場合は、HTMLイメージマップを使用してください（CSSや絶対配置よりも優れたソリューションです）。これを試してください http://www.svennerberg.com/examples/imagemap_rollover/

0
SangeethK