因为很简单，所以先总结一下：使用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. 用DropDownList实现的省市级三级联动

    这是一个用DropDownList 实现的省市级三级联动,记录一下········ <asp:ScriptManager ID="ScriptManager1" runat= ...

  2. Unity3D UNet网络组件详解

    UNet常见概念简介 Spawn:简单来说,把服务器上的GameObject,根据上面的NetworkIdentity组件找到对应监视连接,在监视连接里生成相应的GameObject. Command ...

  3. 使用 SQL 命令 OPTIMIZE TABLE 释放表空间

    前提: 1.删除了表的一大部分: 2.已经对含有可变长度行的表(含有VARCHAR, BLOB或TEXT列的表)进行了很多更改. ----------------------------------- ...

  4. Azure ARM (8) ARM Template - VS Code

    <Windows Azure Platform 系列文章目录> 在上一节内容中,笔者介绍了如何使用Visual Studio来编辑ARM Template. 但是在某些时候,Visual ...

  5. 详解css中的position属性

    这一次直接进入主题. css中最常用的布局类属性,一个是float,另一个就是定位属性position. 对于position来讲,有以下属性值: static : 无特殊定位,对象处于正常文档流.其 ...

  6. AngularJS中使用service，并同步数据

    service是单例对象,在应用中不同代码块之间共享数据. 对一些公用的方法封装到service中,然后通过依赖注入在Controller中调用,示例代码: 1.创建一个模块: var module ...

  7. 使用Graphviz绘图（一）

    前言 日常开发或者编写课程论文时,除了代码文档的编写,其中一个很重要的部分就是需要绘制流程图.示意图 绘制流程图有很多工具,一般常见的就有如下几种: Word.PPT等办公软件 Viso以及开源的Di ...

  8. C#--属性

  9. css异常

    1.0 样式的引用顺序不对会导致样式显示不正常.个人推荐:把别人写好的样式引用在最前面,自己写的放在后面. 2.0 UC手机浏览器 UC手机浏览器在识别到页面文字很多的情况下会自动放大字体优化阅读体验 ...

  10. No Javascript on this page

    在调试SignalR程序时,不知怎样的情况,出现异常: HTTP Error 404.0 - Not Found The resource you are looking for has been r ...