CSS3 六边形绘制

把一个104px的div放在它们之间，设置一个背景颜色：

width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

width: 104px;
height: 60px;
background-color: #6C6;

width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

这就是我们如何在CSS六边形。在边界宽度的30:52比率约为1：3√是六边形的比例要求。

可以用类似的方法来获得一个六角旋转30°。我们周围的一些方向，使用浮：左下降显式设置宽度对0。

float: left;
border-right: 30px solid #6C6;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent;

float: left;
width: 60px;
height: 104px;
background-color: #6C6;

float: left;
border-left: 30px solid #6C6;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent;

【英文全文：http://jtauber.github.io/articles/css-hexagon.html】
【中文链接：http://www.uedsc.com/css-hexagon.html】

转载于:https://www.cnblogs.com/miny-simp/p/6136656.html