(хотя ответ Аны пришел через несколько месяцев после моего, вероятно, используя мой в качестве основы для "мышления", тот факт, что она смогла придумать метод, используя один div стоит продвигать, так проверьте ее ответ тоже--но, обратите внимание, что содержание в шестигранной более ограничен.)

это был действительно удивительный вопрос. Спасибо, что спросили. Самое замечательное то, что:

Эта Скрипка Доказывает, Что Вы Можете Сделать Это!

Оригинальная Скрипка Используется (изменено в более позднем редактировании, чтобы скрипка ссылка выше)--он используется imgur.com изображения, которые не казались очень надежными при загрузке, поэтому новая скрипка использует photobucket.com (дайте мне знать, если есть постоянные проблемы с загрузкой изображения). Я сохранил исходную ссылку, потому что код объяснения ниже идет с этим (есть несколько различий в background-size или position новый скрипка).

в идея пришла ко мне почти мгновенно после прочтения вашего вопроса, но потребовалось некоторое время для реализации. Я изначально пытался получить один " hex " с одним div и просто псевдо-элементы, но, насколько я мог судить, не было никакого способа просто повернуть background-image (что мне было нужно), поэтому мне пришлось добавить некоторые дополнительные div элементы, чтобы получить правую/левую стороны от наговора, так что я мог бы использовать псевдо-элементы в качестве средства background-image поворот.

я тестировал в IE9, FF и Chrome. Теоретически любой браузер поддерживает CSS3 transform он должен работать.

первое основное обновление (добавлено объяснение)

у меня есть некоторое время, чтобы опубликовать некоторые пояснения код, так вот:

во-первых, шестиугольники определяются отношениями 30/60 градусов и тригонометрией, поэтому они будут ключевыми углами. Во-вторых, мы начинаем с "строки" для шестнадцатеричной сетки. HTML определяется как (дополнительный div элементы помогают строить шестигранный):

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

.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 определяется один раз, прямо здесь. Сдвиг влево на нем должен соответствовать, по крайней мере, добавленной ширине для левой стороны шестигранника. Если вы хотите центрировать текст 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;
}

каждого странно число hex мы собираемся сдвинуть вниз по отношению к "строке" и каждому даже перейти. Расчет сдвига ( ширина x cos(30) / 2 ) также совпадает с (высота / 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 элементы для создания "крыльев" шестигранника. Они имеют размер то же самое, что и основной шестигранный прямоугольник, а затем поворачивается и нажимается "ниже" основного шестигранника. Background-image наследуется так, что изображение одно и то же (конечно), потому что изображение в "крыльях" будет "выровнено" до этого в главном прямоугольнике. Псевдо элементы используются для создания изображений, потому что они должны быть" перемотаны " обратно в горизонтальное положение (так как мы повернули Родительский div из них создать "крылья").

The :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 сбрасывается так позволяет снова обернуть. Левое / правое поле может быть установлено в отрицательное, чтобы позволить тексту перейти в" Крылья " шестнадцатеричного.

.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;
}