把一个104px的div放在它们之间,设置一个背景颜色:

width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent; width: 104px;
height: 60px;
background-color: #6C6; width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

这就是我们如何在CSS六边形。在边界宽度的30:52比率约为1:3√是六边形的比例要求。

可以用类似的方法来获得一个六角旋转30°。我们周围的一些方向,使用浮:左下降显式设置宽度0

float: left;
border-right: 30px solid #6C6;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent; float: left;
width: 60px;
height: 104px;
background-color: #6C6; float: left;
border-left: 30px solid #6C6;
border-top: 52px solid transparent;
border-bottom: 52px solid transparent; 【英文全文:http://jtauber.github.io/articles/css-hexagon.html】
【中文链接:http://www.uedsc.com/css-hexagon.html】

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

  1. CSS3—六边形

    整理了2种方法,看完肯定觉得超简单~ 一.旋转型 话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...

  2. 利用CSS3 animation绘制动态卡通人物,无需使用JS代码

    此外博主原创,转载请注明出处:谢谢~ 效果图: 其中云.风车.尾巴是动态的: 以下是代码: <!DOCTYPE html> <html lang="en"> ...

  3. 用CSS3/JS绘制自己想要的按钮

    我认为按钮的绘制分以下三个步骤 第一步,绘制按钮的轮廓 选择合适的html标签,设置轮廓的CSS /* html代码 */ <a href="#" class="b ...

  4. html5 css3 如何绘制扇形任意角度

    扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 <html> <head> <meta charset= ...

  5. css3图形绘制

    以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...

  6. CSS3六边形

    <!DOCTYPE html> <!-- saved from url=(0043)http://dbox.whosemind.net/demo/liufang.html --> ...

  7. CSS3:绘制图形

    CSS画图形,基本上所有的实现都是对边框的角度的调整及组合. 以下不包含兼容浏览器的前缀,请使用时在border-radius前加-moz-.-webkit- .... 1.正常得不得了的矩形 .sq ...

  8. CSS3绘制六边形

    因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...

  9. 20 个超酷的 HTML5/CSS3 应用及源码

    [导读] 1.HTML5视频破碎重组特效,强大视觉冲击HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击.点击视频任意地方,HTM ...

随机推荐

  1. 闲话Android 之 屏幕大小、pixel、分辨率、dpi、dip

    之前都是在自研的产品上做开发,而且我们的屏幕是1dip=1px的,所以在写App布局的时候,随便写单位,也没觉得什么不妥.可是近期我把以前的App里面的一些自定义控件在emulator上跑的时候,才发 ...

  2. 新认识:SDF数据库

    新认识:SDF数据库 一.SDF数据库初探 SDF是一个标准缩略数据库格式.这个数据库包含扩展名为.sdf的文件并且以结构化文件格式进行数据存储.这些SDF文件通常用于在不同数据库应用之间移动数据.它 ...

  3. 基于.NET打造IP智能网络视频监控系统

    开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码   开源倾情奉献系列链接 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码 开源倾情奉献:基于.NET打造 ...

  4. 大IT公司笔试

    都是一些非常非常基础的题,是我最近参加各大IT公司笔试后靠记忆记下来的,经过整理献给与我一样参加各大IT校园招聘的同学们,纯考Java基础功底,老手们就不用进来了,免得笑话我们这些未出校门的孩纸们,但 ...

  5. 如何将 Area 中的 Controller 放到独立的程序集?

    目录 背景如何将 Area 中的 Controller 放到独立的程序集?备注 背景返回目录 本文假设您已经熟悉了 ASP.NET MVC 的常规开发方式.执行模型和关键扩展点,这里主要说一下如何使用 ...

  6. SOCKET网络编程5

    SOCKET网络编程快速上手(二)——细节问题(5)(完结篇) 6.Connect的使用方式 前面提到,connect发生EINTR错误时,是不能重新启动的.那怎么办呢,是关闭套接字还是直接退出进程呢 ...

  7. jquery mobile Checkbox动态添加刷新及事件绑定

    jquery mobile Checkbox动态添加刷新及事件绑定 在微信项目中,涉及到一个多选功能.数据来自后台数据库,需要动态加载. 项目结构:微信api+web app.使用jquery mob ...

  8. css换行和超出隐藏

    一.强制换行1 word-break: break-all; 只对英文起作用,以字母作为换行依据.2 word-wrap: break-word; 只对英文起作用,以单词作为换行依据.3 white- ...

  9. java版微信公众平台自定义菜单创建代码实现

    微信公众平台自定义菜单创建代码实现—java版 搞了两天的自定义菜单,终于搞定了,现在分享下心得,以便后来者少走弯路...... 好了,先看先微信官方的API 官方写的很详细,但是我看完后很茫然,不知 ...

  10. gearman with postgresql as persistent Queuing

    gearman is a good thing gearman client --------------> gearman server <----------------------- ...