CSS3 六边形绘制
把一个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 六边形绘制的更多相关文章
- CSS3—六边形
整理了2种方法,看完肯定觉得超简单~ 一.旋转型 话不多说先看下需要的样式: 1.transform:rotate(angle) 2.overflow 3.visibility 效果:演示效果,run ...
- 利用CSS3 animation绘制动态卡通人物,无需使用JS代码
此外博主原创,转载请注明出处:谢谢~ 效果图: 其中云.风车.尾巴是动态的: 以下是代码: <!DOCTYPE html> <html lang="en"> ...
- 用CSS3/JS绘制自己想要的按钮
我认为按钮的绘制分以下三个步骤 第一步,绘制按钮的轮廓 选择合适的html标签,设置轮廓的CSS /* html代码 */ <a href="#" class="b ...
- html5 css3 如何绘制扇形任意角度
扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化,就可以产生出扇形效果 <html> <head> <meta charset= ...
- css3图形绘制
以下几个例子主要是运用了css3中border.bordr-radius.transform.伪元素等属性来完成的,我们先了解下它们的基本原理. border:简单的来说border语法主要包含(bo ...
- CSS3六边形
<!DOCTYPE html> <!-- saved from url=(0043)http://dbox.whosemind.net/demo/liufang.html --> ...
- CSS3:绘制图形
CSS画图形,基本上所有的实现都是对边框的角度的调整及组合. 以下不包含兼容浏览器的前缀,请使用时在border-radius前加-moz-.-webkit- .... 1.正常得不得了的矩形 .sq ...
- CSS3绘制六边形
因为很简单,所以先总结一下:使用CSS3绘制六边形主要使用伪类:before和:after在源元素之前和之后再绘制两个元素,并利用css3的边框样式,将这两个元素变成三角形放置在源元素的两端即可. ( ...
- 20 个超酷的 HTML5/CSS3 应用及源码
[导读] 1.HTML5视频破碎重组特效,强大视觉冲击HTML5视频播放器很多,但是HTML5视频特效还是很少见的,这款HTML5视频破碎重组特效非常刺激,给人强大的视觉冲击.点击视频任意地方,HTM ...
随机推荐
- Day2:T1搜索 T2最小生成树
T1:广搜+判断矩形 注:如何判断搜的是否为矩形: 在广搜的时候,记录下边界的坐标,然后枚举一遍过去,如果搜到"."就是牛群,否则就是房间 瞥了一眼ccy的做法,据说是floodf ...
- Jenkins中关于一些插件的使用
Jenkins中关于一些插件的使用方法 最近在为公司搭建CI平台过程中,以及在具体项目实施过程中使用过的一些插件的具体用法: 1. ant插件 这个插件可能是我们最为经常使用的,若构建脚本是使用bui ...
- arcengine 实现调用arctoolbox中的dissolove
ESRI.ArcGIS.Geoprocessor.Geoprocessor geoprocessor = new Geoprocessor(); ESRI.ArcGIS.DataManagementT ...
- WEB安全入门
WEB安全入门 信息安全基础 信息安全目标 真实性:对信息的来源进行判断,能对伪造来源的信息予以鉴别, 就是身份认证. 保密性:保证机密信息不被窃听,盗取,或窃听者不能了解信息的真实含义. 完整性:保 ...
- JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...
- Complexity Behind Closure
这篇文章同时发布在github上 这篇文章是我对ooc编译器里一个小bug调试时作的手记.虽然相信大多数人对编译器(并且是一门小众语言的编译器)并不感兴趣,但这篇文章可以给C用户们提供一些Object ...
- C#操作AD及Exchange Server总结
C#操作AD及Exchange Server总结 这篇博客的目的:根据亲身项目经历,总结对AD及Exchange Server的操作,包括新建AD用户,设置密码,为AD用户创建邮箱等. 本文完全原创, ...
- OpenXml操作Word的一些操作总结.
OpenXml操作Word的一些操作总结. OpenXml相对于用MS提供的COM组件来生成WORD,有如下优势: 1.相对于MS 的COM组件,因为版本带来的不兼容问题,及各种会生成WORD半途会崩 ...
- easyUI datagrid 动态绑定列名称
easyUI 基于Jquery ,所以需要引用Jquery文件 easyUI自带了很多样式文件,可以根据需要,引用相应的css文件. 其中datagrid是一个根据json数据,js前端生成前端显示的 ...
- 软件设计师.NET认证考试测试卷(试题及答案)
软件设计师.NET认证考试测试卷 注意事项:用蓝.黑色钢笔答题.保持卷面整洁. 得分 阅卷人 一.单项选择(40分,每小题1分) 1.以下标识符中不全是关键字的是(D ) A.case for in ...