因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可。(因为之前在生物公司工作过,觉得六边形更贴近生物分子、基因等概念,包括我们在网上搜索 ...
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可。
(因为之前在生物公司工作过,觉得六边形更贴近生物分子、基因等概念,包括我们在网上搜索关于生物分子、基因等图片,好多也有六边形的样式,所以那时候在页面做一些功能性的导航或Tag,都会觉得六边形更贴近一些)。
完整的页面效果如下图:(其实是多个六边形定位成这样子的。当然,也可以设置不同六边形的颜色,这样就可以更好的区分不同的模块功能了)。
我们可以单独提出一个六边形分析一下,如下图:
知道了分析思路,我们可以先了解一下如何绘制三角形,网上的列子也很多,不过没有使用过的童鞋不用找了,下面也给出代码和示例,如下:
效果图:
CSS代码:
.arrow{ display: inline-block; width:0px; height: 0px; border-style: solid; border-width: 100px; //与padding、margin属性类似,顺序为上、右、下、左 border-color: red blue orange gray; //顺序为上、右、下、左
}
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:CSS3绘制六边形
关键词:CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。