(Хоча відповідь Ана прийшла через кілька місяців після моєї, ймовірно, використовуючи мою як основу для "думки", той факт, що вона змогла придумати метод, використовуючи один сингл div, варто рекламувати, тому перевірте її відповідь теж - але зверніть увагу, що вміст у hex є більш обмеженим.)
Це було справді дивовижне питання. Дякую, що запитали. Найкраще те, що:
Оригінальна скрипка, використана (змінена в подальшому редагуванні на посилання для скрипки вище) - вона використовувала зображення 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;
margin: 0 25px 3px;
}
Використовуючи безпосередні .hexrowдочірні divелементи, які є лише елементами, ми формуємо основу для шестигранної форми. widthУправлятиме горизонтальним верхньою частиною гекса, то heightпоходить від цього числа , так як всі сторони дорівнює за тривалістю правильного шестикутника. Знову ж, запас буде залежати від інтервалів, але саме тут відбуватиметься "перекриття" окремих шестикутників, щоб зробити вигляд сітки. Це background-imageвизначається один раз, тут. Зсув, що залишився на ньому, повинен забезпечити принаймні додану ширину для лівої сторони шестигранника. Якщо припустити, що вам потрібен текст по центру, він text-alignобробляє горизонталь (звичайно), але той, line-heightщо відповідає height, збирається дозволити вертикальне центрування.
.hexrow > div {
width: 100px;
height: 173.2px;
margin: 0 25px;
position: relative;
background-image: url(http://i.imgur.com/w5tV4.jpg);
background-position: -50px 0;
background-repeat: no-repeat;
color: #ffffff;
text-align: center;
line-height: 173.2px;
display: inline-block;
}
Кожне непарне число шістнадцяткового числа ми будемо зміщувати вниз по відношенню до "рядка" і кожне парне - вгору. Розрахунок зсуву (ширина x cos (30) / 2) також збігається з (висота / 4).
.hexrow > div:nth-child(odd) {
top: 43.3px;
}
.hexrow > div:nth-child(even) {
top: -44.8px;
}
Ми використовуємо 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);
-moz-transform:rotate(60deg);
-webkit-transform:rotate(60deg);
-o-transform:rotate(60deg);
transform:rotate(60deg);
}
.hexrow > div > div:first-of-type:before {
content: '';
position: absolute;
width: 200px;
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);
-moz-transform:rotate(-60deg) translate(-150px, 0);
-webkit-transform:rotate(-60deg) translate(-150px, 0);
-o-transform:rotate(-60deg) translate(-150px, 0);
transform:rotate(-60deg) translate(-150px, 0);
-ms-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-o-transform-origin: 0 0;
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);
-moz-transform:rotate(-60deg);
-webkit-transform:rotate(-60deg);
-o-transform:rotate(-60deg);
transform:rotate(-60deg);
}
.hexrow > div > div:last-of-type:before {
content: '';
position: absolute;
width: 200px;
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(100px, 86.6px);
-moz-transform:rotate(60deg) translate(100px, 86.6px);
-webkit-transform:rotate(60deg) translate(100px, 86.6px);
-o-transform:rotate(60deg) translate(100px, 86.6px);
transform:rotate(60deg) translate(100px, 86.6px);
-ms-transform-origin: 100% 0;
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-o-transform-origin: 100% 0;
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 {
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);
background-position: -150px -120px;
opacity: .3;
color: black;
}
.hexrow:nth-child(2) > div:nth-child(3) > div:before {
background-position: -100px -120px;
}
.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;
}
