因为很简单，所以先总结一下：使用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. Floyd算法(一)之 C语言详解

    本章介绍弗洛伊德算法.和以往一样,本文会先对弗洛伊德算法的理论论知识进行介绍,然后给出C语言的实现.后续再分别给出C++和Java版本的实现. 目录 1. 弗洛伊德算法介绍 2. 弗洛伊德算法图解 3 ...

  2. 【Java基础】序列化与反序列化深入分析

    一.前言 复习Java基础知识点的序列化与反序列化过程,整理了如下学习笔记. 二.为什么需要序列化与反序列化 程序运行时,只要需要,对象可以一直存在,并且我们可以随时访问对象的一些状态信息,如果程序终 ...

  3. C语言学习001:让程序跑起来

    编译工具下载 MinGW - Minimalist GNU for Windows 编译运行 #include <stdio.h> int main(){ puts("C roc ...

  4. javascript学习笔记2-typeof、Number类型、Boolean()

    1.typeof操作符 对一个值使用typeof操作符可能返回下列某个字符串 "undefined"——这个值未定义 "boolean"——这个值是布尔值 &q ...

  5. Oracle--（Hierarchical Queries）层级查询

    内容来自: Oracle® Database SQL Language Reference 11g Release 2 (11.2) E41084-03. empolyees表来自hr方案,wareh ...

  6. Android文件的分割和组装

    使用UDP数据包发送文件时,由于UDP数据包大小的限制,一个文件要放在几个UDP数据包里面发送,这就需要把一个文件分割成若干部分,分别放进若干个UDP数据包里面,在接收端,收到这些UDP数据包以后,再 ...

  7. 关联查询 join on 和比较运算符 in

    join on多表之间的关联查询 写法select 字段 from 表1 t join 表2 s on t.字段1 = s.字段1 where 条件: 也可以这么写select 字段 from 表1 ...

  8. java入门必备单词

    ① anchor 锚 锚点 ② administrator 管理员 ③ application 应用程序 ④ align 对齐 ⑤ attribute 属性 ⑥ access 访问 ⑦ break 暂 ...

  9. 代码与图详解性能之Python集合类型(list tuple dict set generator)

    Python内嵌的集合类型有list.tuple.set.dict. 列表list:看似数组,但比数组强大,支持索引.切片.查找.增加等功能. 元组tuple:功能跟list差不多,但一旦生成,长度及 ...

  10. PostgreSQL除法保留小数

    select round(1::numeric/4::numeric,3);结果为0.25 select round( cast ( 1 as numeric )/ cast( 4 as numeri ...