首先,我很抱歉,如果這不是正確的地方問這個問題。我只是不知道Q/A的其他來源。製作六邊形網格就像在builtbybuffalo.com
我有一個大學項目,其中我必須提交this Site的確切副本,以通過我的web開發實用。
我已經設法複製一切,只有剩下的東西是hexagonal grid
。
如果有人可以訪問該網站,他們可以看到number of hexagons per row changes according to width of browser window
。
這裏是我的網格
CSS代碼和HTML
.container {
margin-top: 120px;
}
.hex-3-row {
display: table;
margin: 30px auto;
}
.hex {
display: inline-block;
width: 190px;
height: 110px;
color: white;
background-color: red;
position: relative;
margin-left: 15px;
z-index: 110;
text-align: center;
line-height: 110px;
}
.hex::after {
content: "";
background-color: red;
height: 110px;
width: 190px;
position: absolute;
top: 0px;
left: 0px;
transform: rotate(60deg);
z-index: -1;
}
.hex::before {
content: "";
background-color: red;
height: 110px;
width: 190px;
position: absolute;
top: 0px;
left: 0px;
transform: rotate(-60deg);
z-index: -1;
}
img {
position: relative;
height: 150px;
width: 150px;
top: 50%;
transform: translateY(-50%);
}
<html>
<head>
<title>hexagon</title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<div class="container">
<div class="hex-3-row">
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
</div>
<div class="hex-3-row">
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
</div>
<div class="hex-3-row">
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
<div class="hex">
<img src="arrow.png" alt="image">
</div>
</div>
</div>
</body>
</html>
現在我所管理的網格看上去有點像他們在全寬。 但是我該如何使其響應?根據寬度更改每行六邊形的數量? 我試圖閱讀他們的源代碼,但無法弄清楚除了他們使用<br>
做的伎倆,但我不能管理。
如果有人能指出我正確的方向,並分享任何學習高級CSS的源代碼,我將非常感激。 非常感謝大家爲你的時間。
我已經嘗試了this thread的解決方案,但我正在尋找的解決方案就像builtbybuffalo.com傢伙一樣,使用<div> <br>
和東西,而不是<ul><li>
。
我不知道,但也許他們使用一個插件來構建這個六邊形網格佈局。這裏是與類似的佈局演示,也許它可以幫助你:http://stackoverflow.com/questions/26114920/responsive-grid-of-hexagons –
你可以看看http://codepen.io/gc-nomade/pen/eyntg,它曾經是一個演示類似的問題在這裏在stackoverflow。 –
@TeutaKoraqi不,他們沒有使用插件,我複製了該Hexagon網格的CSS和HTML,並且它沒有任何jQuery/Javascript :) –