css3 및 html5를 사용하여 불규칙한 모양의 div를 만들려면 어떻게해야합니까?

Question

불규칙한 모양을 가진 div를 만들 가능성이 있는지 궁금합니다. (예 : 그린란드, 유럽, 아프리카) CSS3와 HTML5를 사용하여 여기 에서처럼 맵을 생성하고 싶습니다. 여기

는 예를 들어, 이미지 링크입니다 :

에 많은 된 div의 그리드 중 하나, 당신이 사업부에 많은 그라디언트 중 하나를 얻을 수있는 격자처럼이 보이는 무엇 당신이

Answer 1

요소는 항상 직사각형이었다. 그래도 직사각형 부분에서 CSS 모양을 그리고 다른 부분 (Z- 인덱스 등)을 배열하여 다른 모양을 시뮬레이션 할 수 있습니다. 이것은 당신을 도울 것입니다 :

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

Answer 2

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 3

당신이 정확한 불규칙한 경계가 될하려는 경우, (여전히 CSS와 절대 위치보다 더 나은 솔루션을) HTML 이미지 맵에 대한 이동하려고이 http://www.svennerberg.com/examples/imagemap_rollover/

Answer 4

당신이해야 어떤 요소를 선택하여 사각형으로지도를 만든 다음 div/span/whatever에서 모든 것을 래핑하고 css3 3d 변형을 수행하여 원하는 방식으로 얻을 수 있습니다.