尝试创建一个六边形画廊,我在互联网上搜索并找到了一些示例,然后我创建了一个类似画廊的 this (this is my test hosting site, and that galley designed by me by referring some links)
我正在使用此代码:
#hexGrid {
overflow: hidden;
width: 60%;
margin: 0 auto;
padding: 0.866% 0;
font-family: 'Raleway', sans-serif;
font-size: 15px;
}
#hexGrid:after {
content: "";
display: block;
clear: both;
}
.hex {
position: relative;
list-style-type: none;
float: left;
overflow: hidden;
visibility: hidden;
outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
-ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
.hex * {
position: absolute;
visibility: visible;
outline: 1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexIn {
display: block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
}
/*** HEX CONTENT **********************************************************************/
.hex div {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
.hex h1,
.hex p {
width: 102%;
left: -1%; /* prevent line on the right where background doesn't cover image */
padding: 5%; box-sizing: border-box;
background-color: rgba(0, 128, 128, 0.8);
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
bottom: 50%;
padding-top: 50%;
font-size: 1.5em;
z-index: 1;
-webkit-transform: translateY(-100%) translatez(-1px);
-ms-transform: translateY(-100%) translatez(-1px);
transform: translateY(-100%) translatez(-1px);
}
.hex h1:after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
.hex p {
top: 50%;
padding-bottom: 50%;
-webkit-transform: translateY(100%) translatez(-1px);
-ms-transform: translateY(100%) translatez(-1px);
transform: translateY(100%) translatez(-1px);
}
@media (min-width: 1201px) { /* <- 5-4 hexagons per row */
.hex {
width: 24.25%; /* = (100-3) / 4 */
padding-bottom: 28.001%; /* = width / sin(60deg) */
}
.hex:nth-child(7n+5), .hex:nth-child(7n+6), .hex:nth-child(7n+7) {
margin-top: -6.134%;
margin-bottom: -6.134%;
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(7n+5):last-child, .hex:nth-child(7n+6):last-child, .hex:nth-child(7n+7):last-child {
margin-bottom: 0;
}
.hex:nth-child(7n+2), .hex:nth-child(7n+6) {
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(7n+3) {
margin-right: 1%;
}
.hex:nth-child(7n+8) {
clear: left;
}
.hex:nth-child(7n+5) {
clear: left;
margin-left: 0.5%;
}
}
<ul id="hexGrid">
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-green"></div>
<!--Empty Hex-->
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-violet"></div>
<h1>2</h1>
</a>
</li>
</ul>
<!-- like this 11 hexagons but i'll remove 4 of them to create that -->
我想这样排列六边形:
我现在使用 11 个六边形,如果我在上面的结构中删除 4 个六边形,它会变成这样:
但我需要2-3-2结构!我应该在这段代码中修改什么?
最佳答案
如果您想 修改该代码 (以获得响应式十六进制网格)查看更改(在我更改某些内容的地方,我写了“修改”)。无论如何,我认为有时从头开始编写代码会更好。
* {
margin: 0;
padding: 0;
}
body{
background:#F9F9F9;
}
#hexGrid {
overflow: hidden;
width: 60%;
margin: 0 auto;
font-family: 'Raleway', sans-serif;
font-size: 15px;
background-color:rgba(0,0,0,0.1); /*modified*/
padding-bottom:5.3%; /*modified*/
}
#hexGrid:after {
content: "";
display: block;
clear: both;
}
.hex {
position: relative;
list-style-type: none;
float: left;
overflow: hidden;
visibility: hidden;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
-webkit-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
-ms-transform: rotate(-60deg) skewY(30deg) translatez(-1px);
transform: rotate(-60deg) skewY(30deg) translatez(-1px);
}
.hex * {
position: absolute;
visibility: visible;
outline:1px solid transparent; /* fix for jagged edges in FF on hover transition */
}
.hexIn {
display:block;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
overflow: hidden;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
}
/*** HEX CONTENT **********************************************************************/
.hex div {
left: -100%;
right: -100%;
width: auto;
height: 100%;
margin: 0 auto;
}
.hex h1, .hex p {
width: 102%;
left:-1%; /* prevent line on the right where background doesn't cover image */
padding: 5%;
box-sizing:border-box;
background-color: rgba(0, 128, 128, 0.8);
font-weight: 300;
-webkit-transition: -webkit-transform .2s ease-out, opacity .3s ease-out;
transition: transform .2s ease-out, opacity .3s ease-out;
}
.hex h1 {
bottom: 50%;
padding-top:50%;
font-size: 1.5em;
z-index: 1;
-webkit-transform:translateY(-100%) translatez(-1px);
-ms-transform:translateY(-100%) translatez(-1px);
transform:translateY(-100%) translatez(-1px);
}
.hex h1:after {
content: '';
position: absolute;
bottom: 0;
left: 45%;
width: 10%;
text-align: center;
border-bottom: 1px solid #fff;
}
.hex p {
top: 50%;
padding-bottom:50%;
-webkit-transform:translateY(100%) translatez(-1px);
-ms-transform:translateY(100%) translatez(-1px);
transform:translateY(100%) translatez(-1px);
}
/*** HOVER EFFECT **********************************************************************/
.hexIn:hover h1, .hexIn:focus h1,
.hexIn:hover p, .hexIn:focus p{
-webkit-transform:translateY(0%) translatez(-1px);
-ms-transform:translateY(0%) translatez(-1px);
transform:translateY(0%) translatez(-1px);
}
/*** SPACING AND SIZING **************************************/ /*modified*/
.hex {
width: 32.3333333333%; /* = (100-3) / 3 or use 'calc()' */
padding-bottom: 37.3353174076%; /* = width / sin(60deg) */
margin-bottom: -8.4%;
}
.hex:nth-child(5n+1),
.hex:nth-child(5n+2),
.hex:nth-child(5n+3) {
-webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(5n+3),
.hex:nth-child(5n+4),
.hex:nth-child(5n+5) {
-webkit-transform: translateX(0%) rotate(-60deg) skewY(30deg);
-ms-transform: translateX(0%) rotate(-60deg) skewY(30deg);
transform: translateX(0%) rotate(-60deg) skewY(30deg);
}
.hex:nth-child(5n+1){
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(5n+4){
margin-left: 1%;
margin-right: 1%;
}
.hex:nth-child(5n+3) {
clear: left;
margin-left: 0.5%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="hexagons.css">
<link rel="stylesheet" type="text/css" href="http://supersevadeals.16mb.com/rak_code_hex/css/colors.css">
<link rel="stylesheet" type="text/css" href="css/materialize.min.css">
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
</head>
<body>
<ul id="hexGrid">
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>1</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>2</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>3</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>4</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>5</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>6</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>7</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>8</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>9</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>10</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>11</h1>
</a>
</li>
<li class="hex">
<a class="hexIn" href="#">
<div class="mono-orange"></div>
<h1>12</h1>
</a>
</li>
</ul>
</body>
</html>
关于html - 如何以 2-3-2 树顺序排列 CSS3 六边形,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/40448464/