畫出蜂窩狀效果
代碼如下
每個六邊形的代碼
polygon {
float: left;
? ? width: 33px;
? ? height: 30px;
? ? background-color: #323234;
? ? clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
整體代碼如下參考（請使用谷歌瀏覽器,復(fù)制可用）
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
background: black;
}
.content{
width: 1400px;
height: 720px;
overflow: hidden;
background: -webkit-radial-gradient(#219be2, black, black);
}
.polygon {
float: left;
? ? width: 33px;
? ? height: 30px;
? ? background-color: #323234;
? ? clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
}
.odd{
float: left;
? position: relative;
? top: -17px;
? left: -11px;
? margin-left: -10px;
}
.even{
? position: relative;
? left: -16px;
? top: -2px;
}
</style>
</head>
<body>
<div class='content'></div>
<script>
let content = document.querySelector('.content');
let array = [];
let x = 0;
for(let i=0;i<1289;i++){
array.push(`<div class='polygon ${i%2?'even':'odd'}'></div>`)
}
content.innerHTML = array.join('');
</script>
</body>
</html>
