(비록 아나의 대답은 아마도 “에서 생각”에 도심 그녀가 단일 사용하는 방법을 마련 할 수 있다는 사실 광산을 사용하여, 내 후 개월 만에 온 div, 그래서 가치가 추진하고을 너무 그녀의 대답을 체크 아웃 – 그러나 16 진수의 내용은 더 제한적입니다.)

정말 놀라운 질문이었습니다. 물어봐 주셔서 감사합니다. 좋은 점은 다음과 같은 사실입니다.

이 바이올린은 당신이 할 수 있다는 것을 증명합니다!

원래 바이올린을 사용 (바이올린 위의 링크에 나중에 편집 수정) -이 imgur.com 로딩 매우 신뢰할 수있는 보이는되지 않은 이미지, 새로운 바이올린이 사용되도록 photobucket.com 활용 ( 지속성이 있는지 알려주세요 이미지 로딩 문제 ). 설명 코드는 아래의 (에 약간의 차이가 있음으로 간다 때문에 나는 원래 링크를 유지 한 background-size또는 position새로운 바이올린으로는).

아이디어는 귀하의 질문을 읽은 직후에 나에게 왔지만 구현하는 데 시간이 걸렸습니다. 원래는 하나의 div가상 요소 가있는 단일 “16 진수”를 얻으려고 시도했지만 , 내가 알 수 있듯이 background-image(필요한) 회전 할 방법이 없었기 때문에 div오른쪽을 얻기 위해 몇 가지 추가 요소를 추가 해야했습니다. / 헥스의 왼쪽, 그래서 background-image회전 수단으로 의사 요소를 사용할 수 있습니다 .

IE9, FF 및 Chrome에서 테스트했습니다. 이론적으로 CSS3를 지원하는 모든 브라우저 transform에서 작동해야합니다.

첫 번째 메인 업데이트 (설명 추가)

이제 코드 설명을 게시 할 시간이 있습니다.

첫째, 육각형은 30/60도 관계와 삼각법으로 정의되므로 관련된 주요 각도가됩니다. 둘째, 우리는 16 진수 격자가 상주 할 “행”으로 시작합니다. HTML은 다음과 같이 정의됩니다 (추가 div요소는 16 진수를 만드는 데 도움이됩니다).

<div class="hexrow">
    <div>
        <span>First Hex Text</span>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>Second Hex Text</span>
        <div></div>
        <div></div>
    </div>
    <div>
        <span>Third Hex Text</span>
        <div></div>
        <div></div>
    </div>
</div>

우리는 inline-block육각형 에 사용할 display것이지만 우연히 다음 선으로 래핑되어 그리드가 망가지는 것을 원하지 white-space: nowrap않으므로이 문제를 해결합니다. margin이 행에는 16 진수의 사이에 원하는 공간의 양에 따라 달라집니다 것입니다, 일부 실험은 당신이 원하는 것을 얻기 위해 필요할 수 있습니다.

.hexrow {
    white-space: nowrap;
    /*right/left margin set at (( width of child div x sin(30) ) / 2)
    makes a fairly tight fit;
    a 3px bottom seems to match*/
    margin: 0 25px 3px;
}

의 직계 자식 사용 .hexrow만하는 div요소를 우리는 육각 모양의 기초를 형성한다. (가) width헥사 위쪽의 수평 구동 것이라고는 height모든면이 정육각형의 길이가 동일하기 때문에 그 수로부터 도출된다. 다시 말하지만 여백은 간격에 따라 달라 지지만 그리드 모양을 만들기 위해 개별 육각형의 “겹침”이 발생하는 곳입니다. 는 background-image바로 여기, 한 번 정의된다. 왼쪽 이동은 최소한 16 진수의 왼쪽에 추가 된 너비를 수용하는 것입니다. 중앙에 텍스트를 원한다고 가정하면 text-align가로 (물론)를 처리하지만 line-height일치하는 텍스트 는 세로 중앙 정렬 height을 허용합니다.

.hexrow > div {
    width: 100px;
    height: 173.2px; /* ( width x cos(30) ) x 2 */
    /* For margin:
    right/left = ( width x sin(30) ) makes no overlap
    right/left = (( width x sin(30) ) / 2) leaves a narrow separation
    */
    margin: 0 25px;
    position: relative;
    background-image: url(http://i.imgur.com/w5tV4.jpg);
    background-position: -50px 0; /* -left position -1 x width x sin(30) */
    background-repeat: no-repeat;
    color: #ffffff;
    text-align: center;
    line-height: 173.2px; /*equals height*/
    display: inline-block;
}

각 홀수 16 진수는 “행”과 관련하여 아래로 이동하고 각 짝수는 위로 이동합니다. 시프트 계산 (width x cos (30) / 2)도 (height / 4)와 동일합니다.

.hexrow > div:nth-child(odd) {
    top: 43.3px; /* ( width x cos(30) / 2 ) */
}

.hexrow > div:nth-child(even) {
    top: -44.8px; /* -1 x( ( width x cos(30) / 2) + (hexrow bottom margin / 2)) */
}

우리는 2 개의 자식 div요소를 사용하여 16 진수의 “날개”를 만듭니다. 기본 육각 사각형과 같은 크기로 회전 한 다음 기본 육각형 “아래”로 밉니다. Background-image“날개”의 이미지가 주 직사각형의 이미지와 “일치”될 것이기 때문에 이미지가 동일하도록 상속됩니다 (물론). 가상 요소는 이미지를 생성하는 데 사용됩니다. 이미지를 다시 수평으로 “재 회전”해야하기 때문입니다 ( div“날개”를 만들기 위해 부모 를 회전했기 때문에 ).

:before제의 네거티브 량의 폭은 육각의 주요부 플러스 메인 헥스 원본 배경 시프트 동일의 배경을 해석한다. :before제의 번역은 원점 변경되고, X 축 상에 메인 폭 이동하며, Y 축에 절반 높이.

.hexrow > div > div:first-of-type {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
    background-image: inherit;

    -ms-transform:rotate(60deg); /* IE 9 */
    -moz-transform:rotate(60deg); /* Firefox */
    -webkit-transform:rotate(60deg); /* Safari and Chrome */
    -o-transform:rotate(60deg); /* Opera */
    transform:rotate(60deg);
}

.hexrow > div > div:first-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* width of main + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: top left;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    z-index: 1;

    -ms-transform:rotate(-60deg) translate(-150px, 0); /* IE 9 */
    -moz-transform:rotate(-60deg) translate(-150px, 0); /* Firefox */
    -webkit-transform:rotate(-60deg) translate(-150px, 0); /* Safari and Chrome */
    -o-transform:rotate(-60deg) translate(-150px, 0); /* Opera */
    transform:rotate(-60deg) translate(-150px, 0);

    -ms-transform-origin: 0 0; /* IE 9 */
    -webkit-transform-origin: 0 0; /* Safari and Chrome */
    -moz-transform-origin: 0 0; /* Firefox */
    -o-transform-origin: 0 0; /* Opera */
    transform-origin: 0 0;
}

.hexrow > div > div:last-of-type {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
    overflow: hidden;
    background-image: inherit;

    -ms-transform:rotate(-60deg); /* IE 9 */
    -moz-transform:rotate(-60deg); /* Firefox */
    -webkit-transform:rotate(-60deg); /* Safari and Chrome */
    -o-transform:rotate(-60deg); /* Opera */
    transform:rotate(-60deg);
}

.hexrow > div > div:last-of-type:before {
    content: '';
    position: absolute;
    width: 200px; /* starting width + margin sizing */
    height: 100%;
    background-image: inherit;
    background-position: top left;
    background-repeat: no-repeat;
    bottom: 0;
    left: 0;
    z-index: 1;

    /*translate properties are initial width (100px) and half height (173.2 / 2 = 86.6) */
    -ms-transform:rotate(60deg) translate(100px, 86.6px); /* IE 9 */
    -moz-transform:rotate(60deg) translate(100px, 86.6px); /* Firefox */
    -webkit-transform:rotate(60deg) translate(100px, 86.6px); /* Safari and Chrome */
    -o-transform:rotate(60deg) translate(100px, 86.6px); /* Opera */
    transform:rotate(60deg) translate(100px, 86.6px);

    -ms-transform-origin: 100% 0; /* IE 9 */
    -webkit-transform-origin: 100% 0; /* Safari and Chrome */
    -moz-transform-origin: 100% 0; /* Firefox */
    -o-transform-origin: 100% 0; /* Opera */
    transform-origin: 100% 0;
}

여기에 span텍스트가 있습니다. 은 line-height텍스트의 라인이 정상 만들 리셋하지만 vertical-align: middle이후 작품은 line-height부모에 큰했다. 는 white-space다시 포장 할 수 있도록 재설정됩니다. 왼쪽 / 오른쪽 여백을 음수로 설정하면 텍스트가 16 진수의 “날개”로 들어갈 수 있습니다.

.hexrow > div > span {
    display: inline-block;
    margin: 0 -30px;
    line-height: 1.1;
    vertical-align: middle;
    white-space: normal;
}

해당 행의 개별 대상 행과 셀을 이미지, span텍스트 설정 또는 불투명도 를 변경하거나 더 큰 이미지를 수용 (원하는 위치로 이동)하는 등의 작업을 수행 할 수 있습니다. 이것이 두 번째 행에 대해 수행하는 작업입니다.

.hexrow:nth-child(2) > div:nth-child(1) {
    background-image: url(http://i.imgur.com/7Un8Y.jpg);
}

.hexrow:nth-child(2) > div:nth-child(1) > span {
    /*change some other settings*/
    margin: 0 -20px;
    color: black;
    font-size: .8em;
    font-weight: bold;
}

.hexrow:nth-child(2) > div:nth-child(2) {
    background-image: url(http://i.imgur.com/jeSPg.jpg);
}

.hexrow:nth-child(2) > div:nth-child(3) {
    background-image: url(http://i.imgur.com/Jwmxm.jpg);
    /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
    background-position: -150px -120px;
    opacity: .3;
    color: black;
}

.hexrow:nth-child(2) > div:nth-child(3) > div:before {
    /*you can shift a large background image, but it can get complicated
    best to keep the image as the total width (200px) and height (174px)
    that the hex would be.
    */
    background-position: -100px -120px; /* the left shift is always less in the pseudo elements by the amount of the base shift */
}

.hexrow:nth-child(2) > div:nth-child(4) {
    background-image: url(http://i.imgur.com/90EkV.jpg);
    background-position: -350px -120px;
}

.hexrow:nth-child(2) > div:nth-child(4) > div:before {
    background-position: -300px -120px;
}