欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
六边形在我们网页的制作中，运用得并不是特别广泛。但在一些制作精美，要求创新的一些网页上，我们还是不难看到六边形的身影，如下图1.1所示。用六边形组合的蜂窝状图形，相对来说可能运用的范围应该是最广的。下面我们就来介绍一下如何用HTML打印六边形吧。
图1.1六边形运用展示
解决方案
一个六边形我们可以看成是由两个相等的三角形和一个矩形构成。我们可以通过设置css样式的形式进行打印。将每一部分设置成一个div,对其位置，颜色等进行设置。三角形的设置我们可以将其宽与高设置为0，设置边框的宽度，及样式的样式，最后将上，左，右边的边框，设置成透明色（因为浏览器的显示原因，我们可以直接将颜色设置成白色），这样我们就可以得到想到的三角形。（这里得到的六边形并不是一个正六边形，如果想要得到一个正六边形，可以修改一些数据的值和一些图形的位置。）
如下表所示是一些主要代码：<style type="text/css">
#shape{
margin: 200px 0px 0px 200px;
position: relative;
width: 300px;
height: 500px;
border: 1px solid white;
overflow: hidden;
background-image: url("img/b9a5cbdce3c2b1a72470685a2106f98e.jpg");
border-color:white ;
}
#A{
position: absolute;
top:-150px;
width: 0px;
height: 0px;
border-width: 150px;
border-color:white white deepskyblue;
border-style: solid;
}
#B{
border: 1px solid deepskyblue;
position: absolute;
top:150px;
width: 300px;
height: 200px;
color:deepskyblue;
}
#C{
position: absolute;
top:350px;
width: 0px;
height: 0px;
border-width: 150px;
border-color:deepskyblue white;
border-style: solid;
}
</style>
</head>
图2.1六边形
除了上述方法，我们也可以利用transform属性来实现六边形的打印。而且利用这种方法的打印可能相对来说更简单，打印出来的图形也不需要太多的数值设 置就可以更好看。（transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理。）那么了解了单个六边形是如何打印的之后，那么怎样打印出由六边形组成的蜂窝状图形呢。我们可以用无序列表嵌套的方式，完成相应的打印。
ul{
margin:0;
padding:0;
}
ul{
list-style:none;
width:600px;
margin:100pxauto;
}
li{
float:left;
margin:08px;
height:100px;
}
.hex{
overflow:hidden;
display:block;
width:100px;
height:120px;
transform: rotate(-60deg) skewY(30deg);
}
.hexIn{
background-color:darkgray;
display:block;
width:100px;
height:120px;
line-height:120px;
text-align: center;
transform: skewY(-30deg) rotate(60deg);
}
</style>
</head>
<body>
<ul>
<li>
<span class="hex"><span class="hexIn"></span></span>
</li>
<li>
<span class="hex"><span class="hexIn"></span></span>
</li>
<li>
<span class="hex"><span class="hexIn"></span></span>
</li>
</ul>
</body>
图2.2六边形
结语
对于蜂窝状图形的打印，其中代码有一句是： transform: rotate(-60deg) skew(30deg)。 其中Deg是表示倾斜角度的单位。 Rotate表示旋转，skew倾斜。 END实习编辑 | 王楠岚
责 编 | 刘 连
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
