Итак, мне нужно сделать повторяющийся гексагональный шаблон, используя CSS. Если нужны изображения, я могу пойти туда, но я предпочел бы просто использовать CSS, если это возможно.
Вот идея того, что я пытаюсь создать:
![enter image description here]()
В принципе, мне просто нужен способ создания шестиугольных фигур, а затем поверх них накладывать текст/изображения. У меня пока мало кода, потому что я не совсем уверен, с чего начать. Проблема в том, что я мог бы просто использовать <div> в форме шестиугольника, как показано в (http://css-tricks.com/examples/ShapesOfCSS/), но тогда они не будут" t быть подключением. Я мог бы использовать повторяющийся образец шестиугольника, но тогда я не смог бы указать точное местоположение текста или изображений, которые мне нужны в определенных фигурах. Спасибо за любую помощь заранее.
Ответ 1
(Хотя ответ Ана был получен через несколько месяцев после моего, вероятно, используя мой в качестве основы для "мыслить", тот факт, что она могла придумать метод с использованием одного div, стоит поощрять, поэтому проверить ее ответ - но обратите внимание, что содержимое в шестнадцатеричном формате более ограничено.)
Это был действительно потрясающий вопрос. Спасибо, что спросили об этом. Самое замечательное в том, что:
Исходный скрипт используется (изменено в более позднем редактировании, чтобы перейти на ссылку выше) - он использовал изображения imgur.com, которые не казались быть очень надежным в загрузке, поэтому новая скрипка использует photobucket.com(дайте мне знать, если есть проблемы с постоянной загрузкой изображений). Я сохранил исходную ссылку, потому что приведенный ниже пояснительный код (с некоторыми отличиями в background-size или position есть новая скрипка).
Идея пришла ко мне почти мгновенно после прочтения вашего вопроса, но потребовалось некоторое время для ее реализации. Я изначально пытался получить один "шестнадцатеричный" с одним 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 в этой строке будет зависеть от того, сколько места вы хотите между шестью, и некоторые эксперименты могут понадобиться для получения того, что вы хотите.
.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 для создания "крыльев" ).
: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 - это reset, чтобы строки текста были нормальными, но vertical-align: middle работает, так как line-height больше на родительском. white-space - reset, поэтому он позволяет снова обертывать. Левое/правое поле можно установить на отрицательное, чтобы текст мог попасть в "крылья" шестнадцатеричного.
.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;
}
