(Mặc dù câu trả lời của Ana đến sau tôi vài tháng, có thể sử dụng câu trả lời của tôi làm cơ sở để "suy nghĩ từ", nhưng thực tế là cô ấy có thể đưa ra một phương pháp bằng cách sử dụng một đĩa đơn divrất đáng được quảng bá, vì vậy hãy xem câu trả lời của cô ấy - nhưng lưu ý rằng nội dung trong hệ lục phân bị hạn chế hơn.)
Đây là một câu hỏi thực sự tuyệt vời. Cảm ơn bạn đã hỏi nó. Điều tuyệt vời là thực tế rằng:
Fiddle gốc được sử dụng (được sửa đổi trong lần chỉnh sửa sau thành liên kết fiddle ở trên) - nó sử dụng hình ảnh imgur.com, có vẻ như không đáng tin cậy lắm khi tải, vì vậy fiddle mới đang sử dụng photobucket.com ( hãy cho tôi biết nếu có liên tục vấn đề tải hình ảnh ). Tôi đã giữ liên kết ban đầu vì mã giải thích bên dưới đi kèm với điều đó (có một vài khác biệt trong background-sizehoặc positionđối với fiddle mới).
Ý tưởng đến với tôi gần như ngay lập tức sau khi đọc câu hỏi của bạn, nhưng phải mất một thời gian để thực hiện. Ban đầu, tôi đã thử lấy một "hex" với một divphần tử giả và duy nhất , nhưng tốt nhất tôi có thể nói, không có cách nào để chỉ xoay background-image(mà tôi cần), vì vậy tôi phải thêm một số divphần tử bổ sung để có / bên trái của hex, để sau đó tôi có thể sử dụng các phần tử giả làm phương tiện background-imagequay.
Tôi đã thử nghiệm trong IE9, FF và Chrome. Về mặt lý thuyết, bất kỳ trình duyệt nào hỗ trợ CSS3 đều transformhoạt động được.
Cập nhật chính đầu tiên (giải thích thêm)
Bây giờ tôi có một chút thời gian để đăng một số giải thích về mã, vì vậy hãy tiếp tục:
Đầu tiên, hình lục giác được xác định bởi các mối quan hệ 30/60 độ và lượng giác, vì vậy đó sẽ là những góc quan trọng liên quan. Thứ hai, chúng ta bắt đầu với một "hàng" cho lưới hex nằm trong đó. HTML được định nghĩa là (các divphần tử bổ sung giúp tạo hex):
<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>
Chúng tôi sẽ sử dụng inline-blockcho hình lục giác display, nhưng chúng tôi không muốn chúng vô tình quấn vào dòng tiếp theo và làm hỏng lưới, vì vậy hãy white-space: nowrapgiải quyết vấn đề đó. Trên marginhàng này sẽ phụ thuộc vào bao nhiêu không gian bạn muốn giữa các hex và có thể cần một số thử nghiệm để đạt được những gì bạn muốn.
.hexrow {
white-space: nowrap;
margin: 0 25px 3px;
}
Sử dụng các phần tử con của .hexrowchúng chỉ là divphần tử, chúng tôi tạo cơ sở cho hình dạng hex. Ý widthchí hướng theo chiều ngang của đỉnh của hình lục giác, heightbắt nguồn từ số đó vì tất cả các cạnh có độ dài bằng nhau trên một hình lục giác đều. Một lần nữa, lề sẽ phụ thuộc vào khoảng cách, nhưng đây là nơi "chồng chéo" của các hình lục giác riêng lẻ sẽ xảy ra để làm cho hình dạng lưới xảy ra. Các background-imageđược định nghĩa một lần, ngay tại đây. Sự dịch chuyển sang trái trên nó là để chứa ít nhất chiều rộng được thêm vào cho phía bên trái của hình lục giác. Giả sử bạn muốn văn bản được căn giữa, các ô điều text-alignkhiển sẽ xử lý theo chiều ngang (tất nhiên) nhưng line-heightphù hợp với văn bản heightsẽ cho phép căn giữa theo chiều dọc.
.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;
}
Mỗi hex số lẻ chúng ta sẽ dịch chuyển xuống tương ứng với "hàng" và mỗi chữ số chẵn sẽ dịch chuyển lên. Tính toán dịch chuyển (chiều rộng x cos (30) / 2) cũng giống như (chiều cao / 4).
.hexrow > div:nth-child(odd) {
top: 43.3px;
}
.hexrow > div:nth-child(even) {
top: -44.8px;
}
Chúng tôi đang sử dụng 2 divphần tử con để tạo "đôi cánh" của hex. Chúng có kích thước giống như hình chữ nhật lục giác chính, sau đó được xoay và đẩy "xuống dưới" hình lục giác chính. Background-imageđược kế thừa để hình ảnh giống nhau (tất nhiên), vì hình ảnh trong "cánh" sẽ được "xếp hàng" với hình ảnh đó trong hình chữ nhật chính. Các phần tử giả được sử dụng để tạo ra các hình ảnh, vì chúng cần được "xoay" lại theo chiều ngang (vì chúng tôi đã xoay phần tử gốc divcủa chúng để tạo ra "đôi cánh").
Cái :befoređầu tiên sẽ dịch nền của nó theo chiều rộng của lượng âm bằng phần chính của hex cộng với dịch chuyển nền ban đầu của hex chính. Điểm :beforethứ hai sẽ thay đổi điểm gốc của phép dịch và sẽ dịch chuyển chiều rộng chính trên trục x và một nửa chiều cao trên trục 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);
-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;
}
Đây là spannơi chứa văn bản của bạn. Việc line-heightđặt lại được đặt lại để làm cho các dòng văn bản bình thường, nhưng vertical-align: middlehoạt động vì dòng line-heightlớn hơn trên dòng chính. Các white-spaceđược thiết lập lại để cho phép gói lại. Lề trái / phải có thể được đặt thành âm để cho phép văn bản đi vào "cánh" của hệ lục phân.
.hexrow > div > span {
display: inline-block;
margin: 0 -30px;
line-height: 1.1;
vertical-align: middle;
white-space: normal;
}
Bạn có thể nhắm mục tiêu từng hàng và ô trong những hàng đó để thay đổi hình ảnh hoặc spancài đặt văn bản, độ mờ hoặc chứa một hình ảnh lớn hơn (để chuyển nó đến nơi bạn muốn), v.v. Đó là những gì sau đây làm cho hàng thứ hai.
.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;
}
