Пчелиные соты - div сетка
Стало интересно как div будут выглядеть в виде пчелиных сот. Интересно, может стоит где-то исопльзовать
Продолжая забавляться с сотами, решил, что нужно все это выводить на JS, чтобы можно было дальше манипулировать сотами:
В матрице можно раставлять цвета....затягивает.
(результат верстки)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пчелиные соты</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.honeycomb {
display: flex;
flex-direction: column;
align-items: center;
}
.row {
display: flex;
justify-content: center;
}
.cell {
position: relative;
width: 100px; /* Ширина ячейки */
height: 100px; /* Высота ячейки */
background-color: #ffcc00; /* Цвет по умолчанию */
margin: 0; /* Убираем отступы между ячейками */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
border: 1px solid #fff; /* Светло-желтая рамка */
}
.cell:nth-child(odd) {
background-color: #ff9900; /* Цвет для нечетных ячеек */
}
.offset {
margin-left: 101px; /* Сдвиг вправо на 50 пикселей */
margin-top: -23px; /* Сдвиг вверх на 23 пикселя */
}
.one {margin-top:-23px;}
</style>
</head>
<body>
<div class="honeycomb">
<div class="row one">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row offset">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row one">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row offset">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row one">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row offset">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
</div>
</body>
</html>
Продолжая забавляться с сотами, решил, что нужно все это выводить на JS, чтобы можно было дальше манипулировать сотами:
В матрице можно раставлять цвета....затягивает.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пчелиные соты</title>
<style>
body {
display: flex;
justify-content: left;
align-items: left;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.honeycomb {
display: flex;
flex-direction: column;
align-items: center;
}
.row {
display: flex;
justify-content: center;
width: 100%; /* Задаем ширину для правильного выравнивания */
}
.cell {
position: relative;
width: 100px; /* Ширина ячейки */
height: 100px; /* Высота ячейки */
background-color: #ffcc00; /* Цвет по умолчанию */
margin: 0; /* Убираем отступы между ячейками */
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
border: 1px solid #fff; /* Светло-желтая рамка */
}
.cell:nth-child(odd) {
background-color: #ff9900; /* Цвет для нечетных ячеек */
}
.cell.dark {
background-color: #cc9900; /* Темный цвет для границ */
}
.offset {
margin-left: 101px; /* Сдвиг вправо на 100 пикселей */
margin-top:-23px;
margin-bottom:-23px;
}
</style>
</head>
<body>
<div class="honeycomb" id="honeycomb"></div>
<script>
const rows = [
['dark', 'dark', 'dark', 'dark', 'dark', 'dark', 'dark'],
['dark', '', '', '', '', '', 'dark'],
['dark', '', '', '', '', '', 'dark'],
['dark', '', '', '', '', '', 'dark'],
['dark', '', '', '', '', '', 'dark'],
['dark', '', '', '', '', '', 'dark'],
['dark', 'dark', 'dark', 'dark', 'dark', 'dark', 'dark'],
];
const honeycomb = document.getElementById('honeycomb');
rows.forEach((row, index) => {
const rowDiv = document.createElement('div');
rowDiv.classList.add('row');
// Добавляем смещение для четных строк
if (index % 2 !== 0) {
rowDiv.classList.add('offset');
}
row.forEach(cell => {
const cellDiv = document.createElement('div');
cellDiv.classList.add('cell');
if (cell === 'dark') {
cellDiv.classList.add('dark');
}
rowDiv.appendChild(cellDiv);
});
honeycomb.appendChild(rowDiv);
});
</script>
</body>
</html>
