CSS3如何绘制六边形

　　介绍

小编给大家分享一下CSS3如何绘制六边形,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用<强> 在源元素之前和之后再绘制两个元素,并利用CSS3的<强> ,将这两个元素变成三角形放置在源元素的两端即可。

(因为之前在生物公司工作过,觉得六边形更贴近生物分子,基因等概念,包括我们在网上搜索关于生物分子,基因等图片,好多也有六边形的样式,所以那时候在页面做一些功能性的导航或标签,都会觉得六边形更贴近一些)。

完整的页面效果如下图:(其实是多个六边形定位成这样子的。当然,也可以设置不同六边形的颜色,这样就可以更好的区分不同的模块功能了)。

CSS3如何绘制六边形

我们可以单独提出一个六边形分析一下,如下图:

CSS3如何绘制六边形

知道了分析思路,我们可以先了解一下如何绘制三角形,网上的列子也很多,不过没有使用过的童鞋不用找了、下面也给出代码和示例,如下:

效果图:

CSS3如何绘制六边形

<强> CSS代码:

.arrow {,, 　　,,,,,,,,,,,,,显示:,inline-block;,,, 　　,,,,,,,,,,,,,宽度:0 px;,,, 　　,,,,,,,,,,,,,身高:,0 px;,,, 　　,,,,,,,,,,,,,边框样式:,固体,,,, 　　,,,,,,,,,,,,,边框宽度:,100 px;,//与填充,优势属性类似,顺序为上,右,下,左,,, 　　,,,,,,,,,,,,,边框颜色:,red  blue  orange 灰色;//顺序为上,右,下,左}

HTML代码:

<李>

,=,,

如上图所说,利用边界边框属性,填充我们不想要的颜色为透明色,即可得到某一部分三角形,代码和图片效果如下。

效果图:(左边的三角形是我们需要的,其它的设置为了透明色)

CSS3如何绘制六边形

CSS代码:

.arrow {,, 　　,,,,,,,,,,,,,显示:,inline-block;,,, 　　,,,,,,,,,,,,,宽度:0 px;,,, 　　,,,,,,,,,,,,,身高:,0 px;,,, 　　,,,,,,,,,,,,,边界底部:,100 px  solid 透明;//设置透明色,,, 　　,,,,,,,,,,,,,border-top:, 100 px  solid 透明;//设置透明色,,, 　　,,,,,,,,,,,,,边境:,100 px  solid 透明;//设置透明色,,, 　　,,,,,,,,,,,,,border-left:, 100 px  solid 灰色,,,, 　　,, 　　,,,,,,,,,}

HTML代码:

<李>

,=,,

好的,知道了如何画三角形,在利用CSS伪类:之前和:后就可以完成我们想要绘制的六边形了。

:之前是在元素的前面插入内容

:后是在元素的后面插入内容

如果我们想要插入一些文字性的内容可以在它的内容属性中录入需要展示的文字,例如内容:“你好WORLD",不过我们的例子是不需要展示额外信息的。我们只是需要将之前和之后这两个伪元素变成三角形放置到固定位置即可。

给出完整的代码如下:

& lt; ! DOCTYPE  html>,, 　　& lt; html>,, 　　& lt; head  lang=癳n"祝辞,, 　　,,,& lt; meta  charset=癠TF-8"祝辞,, 　　,,,& lt; title> & lt;/title>,, 　　,,,& lt; style 类型=拔谋?css"祝辞,, 　　,, 　　,,,,之前.sharp: {,, 　　,,,,,,,,内容:““;//不需要展现文字等内容,所以设置为空字符,,, 　　,,,,,,,,宽度:0 px;,,, 　　,,,,,,,,边界底部:80 px  solid 透明的,,,, 　　,,,,,,,,border-top: 80 px  solid 透明的,,,, 　　,,,,,,,,边境:40 px  solid  # 6 c6,,,, 　　,,,,,,,,位置:绝对的,,,, 　　,,,,,,,,左:-40 px;,,, 　　,,,,,,,,:0 px;,,, 　　,,,,},,, 　　,,,,.sharp {,, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

CSS3如何绘制六边形