Итак, мне нужно сделать повторяющийся шестиугольный узор с помощью CSS. Если нужны изображения, я могу пойти туда, но я бы предпочел просто использовать CSS, если это возможно.

Вот идея того, что я пытаюсь создать:

По сути, мне просто нужен способ создать шестиугольные формы, а затем наложить на них текст / изображения. У меня пока немного кода, потому что я не совсем уверен, с чего начать. Проблема в том, что я мог бы просто использовать <div>s в форме шестиугольника, как показано на ( http://css-tricks.com/examples/ShapesOfCSS/ ), но тогда они не будут подключаться. Я мог бы использовать повторяющийся шестиугольник, но тогда я не смог бы указать точное местоположение текста или изображений, которые мне нужны в определенных формах. Спасибо за любую помощь заранее.

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

Это был действительно потрясающий вопрос. Спасибо, что спросили. Самое замечательное в том, что:

Эта скрипка доказывает, что вы можете это сделать!

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

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

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

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

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

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

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

Каждый шестигранник с нечетным числом мы будем сдвигать вниз по отношению к «строке», а каждое четное - вверх. Расчет сдвига (ширина 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чтобы создать «крылья»).

:beforeИз первых будет переводить его фон ширину суммы отрицательной , равную основную часть гекса плюс исходного фонового сдвиг основного гекса. :beforeВторой изменит исходную точку перевода и переложить основную ширину на оси х, а половина высоты по оси у.

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

На самом деле это можно сделать, используя только один элемент на шестиугольник и псевдоэлементы для фонового изображения и текста.

демо

Базовая структура HTML :

<div class='row'>
    <div class='hexagon'></div>
</div>
<div class='row'>
    <div class='hexagon content ribbon' data-content='This is a test!!! 
    9/10'></div><!--
    --><div class='hexagon content longtext' data-content='Some longer text here.
       Bla bla bla bla bla bla bla bla bla bla blaaaah...'></div>
</div>

У вас может быть больше строк, вам просто нужно иметь n шестиугольники на нечетных строках и n+/-1шестиугольники на четных строках.

Соответствующий CSS :

* { box-sizing: border-box; margin: 0; padding: 0; }
.row { margin: -18.5% 0; text-align: center; }
.row:first-child { margin-top: 7%; }
.hexagon {
    position: relative;
    display: inline-block;
    overflow: hidden;
    margin: 0 8.5%;
    padding: 16%;
    transform: rotate(30deg) skewY(30deg) scaleX(.866); /* .866 = sqrt(3)/2 */
}
.hexagon:before, .content:after {
    display: block;
    position: absolute;
    /* 86.6% = (sqrt(3)/2)*100% = .866*100% */
    top: 6.7%; right: 0; bottom: 6.7%; left: 0; /* 6.7% = (100% -86.6%)/2 */
    transform: scaleX(1.155) /* 1.155 = 2/sqrt(3) */ 
               skewY(-30deg) rotate(-30deg);
    background-color: rgba(30,144,255,.56);
    background-size: cover;
    content: '';
}
.content:after { content: attr(data-content); }
/* add background images to :before pseudo-elements */
.row:nth-child(n) .hexagon:nth-child(m):before {
    background-image: 
        url(background-image-mxn.jpg); 
}

Я покажу простую демонстрацию того, как создать шестиугольную форму.

.hex {
  width: 40px;
  height: 70px;
  margin: 20px;
  overflow: hidden;
}

.hex:before {
  content: "";
  transform: rotate(45deg);
  background: #f00;
  width: 50px;
  height: 50px;
  display: inline-block;
  margin: 10px -5px 10px -5px;
}

<div class="hex">
</div>

Вот еще один подход с использованием COMPASS / SCSS, который позволяет легко установить размер и расположение шестиугольников:

http://codepen.io/interdruper/pen/GrBEk

Вы можете создать полностью адаптивную шестиугольную сетку, используя только CSS. Идея состоит в том, чтобы создать родительскую форму в виде маски с использованием CSS2.1 overflow: hidden, который совместим почти со всеми браузерами, даже с Internet Explorer 6.

Это удивительно простой метод, который можно использовать для создания адаптивной сетки всех видов форм, для решения проблемы просто требуется нестандартное мышление.

У меня есть подробное пошаговое руководство по использованию этой техники здесь: https://www.codesmite.com/article/how-to-create-pure-css-hexagonal-grids

Это лучший способ, который я нашел до сих пор, не требует javascript и одновременно гибок и отзывчив.

Я также использовал эту технику в бесплатном шаблоне HTML, который включает изображения внутри шестиугольников, которые вы можете продемонстрировать и загрузить здесь: https://www.codesmite.com/freebie/hexa-free-responsive-portfolio-template

если вы можете реализовать трюк с фигурами div, просто дайте каждому div a position:relative(сначала вам придется сначала расположить их все по одному, также установив topи left)

AFAIK, в чистом CSS нет способа сделать это. Лучше всего использовать обрезку по маске для фона, как описано здесь: http://www.cssbakery.com/2009/06/background-image.html (это будет работать только в том случае, если фон вашей страницы сплошной или вы можете разместить и расположите маску в соответствии с фоном страницы.

Затем вы можете использовать csstextwrap, чтобы поместиться в текст: http://www.csstextwrap.com/examples.php

По SO была куча похожих вопросов. Например, есть ли способ, чтобы текст в div заполнял форму треугольника?