画出蜂窝状效果
Bitmap.png
代码如下
每个六边形的代码
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%);
}
整体代码如下参考（请使用谷歌浏览器,复制可用）
<!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>
