荷兰鼠图片,扬州天气2345,1sss
网上已经有很多关于正六边形的css画法,主要是利用一个矩形和前后的两个三角形组合而成。
之前在看四维图新的官网的时候,发现了一种六边形的画法,比较适合多排六边形组合成蜂窝状的展示区域(注:四维图新现在改成了上面说的那种画法了)。
示意图:
1、html结构
<body>
<ul>
<li>
<span class="hex"><span class="hexin">1</span></span>
</li>
<li>
<span class="hex"><span class="hexin">2</span></span>
</li>
<li>
<span class="hex"><span class="hexin">3</span></span>
</li>
<li>
<span class="hex"><span class="hexin">4</span></span>
</li>
<li>
<span class="hex"><span class="hexin">5</span></span>
</li>
<li>
<span class="hex"><span class="hexin">6</span></span>
</li>
<li>
<span class="hex"><span class="hexin">7</span></span>
</li>
<li>
<span class="hex"><span class="hexin">8</span></span>
</li>
<li>
<span class="hex"><span class="hexin">9</span></span>
</li>
<li>
<span class="hex"><span class="hexin">10</span></span>
</li>
<li>
<span class="hex"><span class="hexin">11</span></span>
</li>
<li>
<span class="hex"><span class="hexin">12</span></span>
</li>
<li>
<span class="hex"><span class="hexin">13</span></span>
</li>
<li>
<span class="hex"><span class="hexin">14</span></span>
</li>
<li>
<span class="hex"><span class="hexin">15</span></span>
</li>
<li>
<span class="hex"><span class="hexin">16</span></span>
</li>
<li>
<span class="hex"><span class="hexin">17</span></span>
</li>
<li>
<span class="hex"><span class="hexin">18</span></span>
</li>
<li>
<span class="hex"><span class="hexin">19</span></span>
</li>
<li>
<span class="hex"><span class="hexin">20</span></span>
</li>
</ul>
</body>
每个li里包着.hex和.hexin。.hexin是内容区,.hex是一个菱形切割区,将.hexin切割成六边形。具体看css。
2、css
ul {
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 560px;
margin: 100px auto;
}
li {
float: left;
margin: 0 5px;
height: 96px;
}
.hex {
overflow: hidden;
display: block;
width: 100px;
height: 116px;
transform: rotate(-60deg) skewy(30deg);
}
.hexin {
background-color: #ccc;
display: block;
width: 100px;
height: 116px;
line-height: 116px;
text-align: center;
transform: skewy(-30deg) rotate(60deg);
}
li:nth-child(9n + 6) {
margin-left: 60px;
}
里面有几个关键的长度和宽度:
.hexin区域如图:
.hex区域如图:
li区域如图:
根据以上的宽度和高度说明,以上数值都要满足一定的关系,直接说结论:
假设需要平行边距离为w的六边形,每个六边形之间的间隔为m。
那么:
3、实现效果图
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论