因为很简单，所以先总结一下：使用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. double保持精度，防止小数点后数字的丢失的小方法

    一般情况下,输入带小数点的字面值,编译器会把它解析成double 类型. 例如:一个字面值被直接放到代码中,由于带小数点所以,默认值为double类型   输出结果是:1.12345678912345 ...

  2. [c++] Pieces of knowledge

    再系统地学一遍c++,查缺补漏. wchar_t L'a' stored in wchar_t. size of types cout << numeric_limits<doubl ...

  3. spring 源码分析之BeanPostProcessor

    1.官方解答: Factory hook that allows for custom modification of new bean instances, e.g. checking for ma ...

  4. Windows Azure Active Directory (1) 前言 - 基于声明的验证和授权

    <Windows Azure Platform 系列文章目录> 在我们介绍整套系统架构之前,我们需要首先定义一些基本的概念. 用户及其属性: 用户值得是要使用某项服务的个体.用户一般都有一 ...

  5. 第24/24周 数据库维护（Database Maintenance）

    哇哦,光阴似箭!欢迎回到性能调优培训的最后一期.今天我会详细讲下SQL Server里的数据库维护,尤其是索引维护操作,还有如何进行数据库维护. 索引维护 作为一个DBA,数据库维护是你工作中非常重要 ...

  6. 在SQL Server里禁用聚集索引——真的好么？

    有人问了我一个最有意思的问题:“你能禁用聚集索引么?” 对这个问题,我先是吓了一跳,因为我从未想过禁用聚集索引,因为聚集索引代表表数据,对这个最有趣问题,我立即答道:“我认为可以,但是...” 好吧, ...

  7. 实现iOS图片等资源文件的热更新化(一): 从Images.xcassets导出合适的图片

    本文会基于一个已有的脚本工具自动导出所有的图片;最终给出的是一个从 Images.xcassets 到基于文件夹的精简 合适 的图片资源集的完整过程.难点在于从完整图片集到精简图片集,肯定是基于一个定 ...

  8. jQuery源码解读-事件分析

    最原始的事件注册 addEventListener方法大家应该都很熟悉,它是Html元素注册事件最原始的方法.先看下addEventListener方法签名: element.addEventList ...

  9. Windows线程漫谈界面线程和工作者线程

    每个系统都有线程,而线程的最重要的作用就是并行处理,提高软件的并发率.针对界面来说,还能提高界面的响应力. 线程分为界面线程和工作者线程,界面实际就是一个线程画出来的东西,这个线程维护一个“消息队列” ...

  10. C#通用类Helper整理

    ★前言     最近下载了tita_chou在CSDN上传的一个资源,是在工作中整理的C#帮助类,里面包含了很多实用的类,想到我之前收集过自己用到少的可怜的类,心生敬意啊.当粗略的查看了那个资源,发现 ...