CSS3基础纯CSS制作正六边形图案的简单步骤

纯CSS制作正六边形图案的简单步骤

正六边形是一个很美观的图形,它的每个内角是360度,蜂巢和苯的分子结构都是正六边形,正六边形两相对顶点之间的距离是边长的2倍,正六边形两边之间的距离是边长的3^(1/2)倍,也就是3的平方根,约等于1.732,在CSS里实现正六边形可能无法做到那么精确,比例近似就可以了。

正六边形.png

通过CSS实现正六边形的思路是,先做一个宽为a,高为1.732a的矩形,然后给矩形的左右两侧加上高为1/2a的一个小三角形,下面我们来试试看:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
.box {width:60px;height:104px;margin:50px auto;background:#66f;}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

这里做出了一个宽为60px,高为104px的矩形,高与宽的比值约等于1.732...下面我们给矩形的两侧加上小三角形,关于三角形的做法,请点这里温习

.box::before {
 content:" ";width:0;height:0;
 border-left:30px solid #8BD397;
 border-top:52px solid transparent;
 border-bottom:52px solid transparent;
}
.box::after {
 content:" ";width:0;height:0;
 border-right:30px solid #DA4FD5;
 border-top:52px solid transparent;
 border-bottom:52px solid transparent;
}

注意这里的30px和52px是怎么来的,30和52分别是中间矩形宽和高的一半,这是一个对称图形,应该能理解这里的含义。接下来,通过定位的方式,将这两个三角形分别定位到矩形的左右两侧,也就是:

.box {position:relative;}
.box::before {
 content:" ";width:0;height:0;
 border-left:30px solid #8BD397;
 border-top:52px solid transparent;
 border-bottom:52px solid transparent;
 position:absolute;right:-30px;top:0;
}
.box::after {
 content:" ";width:0;height:0;
 border-right:30px solid #DA4FD5;
 border-top:52px solid transparent;
 border-bottom:52px solid transparent;
 position:absolute;left:-30px;top:0;
}

以中间的举行为参照物,让左右边框分别向反方向偏移,这样就完成了这个六边形的图案:

CSS六边形3.png

现在只需把左右两个“边框”的颜色改为和中间矩形相同即可,整体代码为:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
.box {
 width:60px;height:104px;margin:50px auto;
 background-color:#66f;
 position:relative;
}
.box::before {
 content:" ";width:0;height:0;
 border-left:30px solid #66f;
 border-top:52px solid transparent;
 border-bottom:52px solid transparent;
 position:absolute;right:-30px;top:0;}
.box::after {
 content:" ";width:0;height:0;
 border-right:30px solid #66f;
 border-top:52px solid transparent;
 border-bottom:52px solid transparent;
 position:absolute;left:-30px;top:0;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>

最终得出的六边形效果图为:

正六边形CSS.png

如需改变这个图形的颜色,则需要更改中间“矩形”和背景颜色以及“左右边框”的颜色……

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/83.html