因为很简单，所以先总结一下：使用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;　　//顺序为上、右、下、左
}

HTML代码:

<div class="arrow"></div>

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

效果图：（左边的三角形是我们需要的，其它的设置为了透明色）

CSS代码:

.arrow{

              display: inline-block;

              width:0px;

              height: 0px;

              border-bottom: 100px solid transparent;　　//设置透明色

              border-top: 100px solid transparent;　　　//设置透明色

              border-right: 100px solid transparent;　　//设置透明色

              border-left: 100px solid gray;

          }

HTML代码：

<div class="arrow"></div>

Okay。知道了如何画三角形，在利用CSS伪类:before和:after就可以完成我们想要绘制的六边形了。

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

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

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

给出完整的代码如下：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

     .sharp:before{

         content:"";　　//不需要展现文字等内容,所以设置为空字符

         width:0px;

         border-bottom:80px solid transparent;

         border-top:80px solid transparent;

         border-right:40px solid #6c6;

         position:absolute;

         left:-40px;

         top:0px;

     }

     .sharp{

         min-width:100px;

         height:160px;

         background:#6c6;

         display: inline-block;

         position: absolute;

         line-height: 160px;

         color:#FFFFFF;

         font-size: 20px;

         text-align: center;

     }

     .sharp:after{

         content:"";　　//不需要展现文字等内容,所以设置为空字符

         width:0px;

         border-bottom:80px solid transparent;

         border-top:80px solid transparent;

         border-left-width:40px;

         border-left-style: solid;

         border-left-color:#6c6;

         position:absolute;

         right:-40px;

         top:0px;

     }

        #sharpContainer{

            width:100%;

            height: 600px;

        }

        #sharpContainer .center{

            top:200px;

            left:300px;

        }

         #sharpContainer .top{

             top:20px;

             left:300px;

         }

         #sharpContainer .top-left{

             top:110px;

             left:140px;

         }

         #sharpContainer .top-right{

             top:110px;

             left:460px;

         }

         #sharpContainer .bottom{

             top:380px;

             left:300px;

         }

         #sharpContainer .bottom-left{

             top:290px;

             left:140px;

         }

         #sharpContainer .bottom-right{

             top:290px;

             left:460px;

         }

    </style>

</head>

<body>

<div id="sharpContainer">

    <div class="sharp center">

      1

    </div>

    <div class="sharp top">

       2

    </div>

    <div class="sharp top-left">

        3

    </div>

    <div class="sharp top-right">

        4

    </div>

    <div class="sharp bottom">

        5

    </div>

    <div class="sharp bottom-left">

        6

    </div>

    <div class="sharp bottom-right">

        7

    </div>

</div>

</body>

</html>

六边形绘制其实是很简单的效果，只要我们了解如何绘制三角形和使用:before,:after伪类样式即可。以后我们在项目中就可以加入更多的不规则的图形了。

感谢阅读。

CSS3绘制六边形的更多相关文章

  1. css绘制六边形

    CSS id选择器实现 正六边形 用css绘制六边形需要使用到三个容器,分别用于绘制六边形的三个部分,如下图所示: HTML代码: <div id="box1">< ...

  2. CSS3绘制旋转的太极图案（一）

        实现步骤: 基础HTML: <div class="box-taiji"> <div class="circle-01">< ...

  3. css3制作六边形图片

    效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>v ...

  4. css3绘制几何图形

    用css3绘制你需要的几何图形 1.圆形 示例: 思路:给任何正方形元素设置一个足够大的 border-radius ,就可以把它变成一个圆形.代码如下: html: <div class=&q ...

  5. 用纯CSS3绘制萌系漫画人物动态头像

    大家已经见惯了用CSS3画的图标.LOGO.头像,这次台湾同学Rei给我们带来了用纯CSS3绘制的日本动漫<轻音少女>女主角秋山澪的动态头像.看到动图我震惊了!!!CSS3的强大再次霸气测 ...

  6. CSS3 实现六边形Div图片展示效果

    原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflo ...

  7. css3绘制腾讯logo

    CSS3绘制的腾讯LOGO,下边是对比图. 演示地址

  8. 【项目1-1】使用HTML5+CSS3绘制HTML5的logo

    作为一个WEB小萌新,自学了有一段时间,总是感觉停滞不前.最近反思中,想到前贤一句话:书读百遍其义自见.说到底,还是项目做的少,如果做多了,想必自然会得心应手. 利用HTML5+CSS3绘制HTML5 ...

  9. css3实现六边形

    实现原理:这个效果的主要css样式有:1.>transform: rotate(120deg); 图片旋转2.>overflow:hidden; 超出隐藏3.>visibility: ...

随机推荐

  1. Hadoop官方文档翻译——YARN Architecture（2.7.3）

    The fundamental idea of YARN is to split up the functionalities of resource management and job sched ...

  2. 深入解读A/B 测试的统计学原理

    了解一些统计学知识对正确地进行 A/B 测试和研判试验结果是很有帮助的,本篇文章深入介绍了A/B 测试的原理和背后的统计学依据.完全理解本文中提到的数学计算需要你掌握概率方面的一点基础知识. 统计学在 ...

  3. Deep learning：四十六(DropConnect简单理解)

    和maxout(maxout简单理解)一样,DropConnect也是在ICML2013上发表的,同样也是为了提高Deep Network的泛化能力的,两者都号称是对Dropout(Dropout简单 ...

  4. DRA(Data Recovery Advisor)的使用

    关于DRA的官方描述: The simplest way to diagnose and repair database problems is to use the Data Recovery Ad ...

  5. 可视化（番外篇）——在Eclipse RCP中玩转OpenGL

    最近在看有关Eclipse RCP方面的东西,鉴于Gephi是使用opengl作为绘图引擎,所以,萌生了在Eclipse RCP下添加画布,使用opengl绘图的想法,网上有博文详细介绍这方面的内容, ...

  6. js获取图片的真实大小，字节大小

    在我们上传文件的时候,很多时候都要对他做限制,那么怎么在文件上传的时候,就获得这个文件的大小呢?至少在js前台有一个判断的时候,就不会给后台造成更大的压力了,下面就用js来获得文件的大小 <ht ...

  7. win7+theano with GPU enabled

    要做卷积神经网络的一些东西,所以要装theano,网上很多Theano安装教程版本较老,而各安装包更新很快,参考价值有限.走了很多弯路才装好,把这个过程记录下来,希望对大家有帮助~ ~ 我的配置:wi ...

  8. 基于HT for Web 快速搭建3D机房设备面板

    以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...

  9. 简单的描述Java中的构造函数，及访问修饰符

    作为一个Java 初学者,对Java的理解可能有些片面,甚至有些错误的理解,对于观看此处的您,希望您选择性观看!!! 访问修饰符: 1.常用访问修饰符: public 共有的 private 私有的 ...

  10. 【UWP】UI适配整理

    做UWP有几个月了,期间发布了几个应用,在这里整理一下适配相关的一些东西,UWP关于UI的适配主要有两种方式: 1.VisualState+Trigger:通过触发器出发界面更变,通常在Desktop ...