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 ...
随机推荐
- Linq无聊练习系列8---开放式并发事务,null和 DateTime,string操作练习
/*********************开放式并发事务,null和 DateTime,string操作练习**********************************/ //所谓并发,就是 ...
- 【学习笔记】《JavaScript DOM 编程艺术》 ——总结
一.要点阐述 1,程序设计语言分为解释型和编译型两大类,JS属于解释型,在Web浏览器中一边解释一边执行. 2,"//"注释单行,"/*...*/"注释多行.反 ...
- 目标指向、Icon图标的错误
VS打包后生成快捷方式:目标指向.Icon图标的错误 1.目标指向错误: 在安装***.msi文件后,对快捷方式-->右键-->属性: 发现目标并非指exe文件. 于是我新建了一个快捷方式 ...
- 采用SOLR进行全文索引的完整解决方案,设计图
- .NET对象占内存多少
.NET对象占内存多少 一直有一个小小的疑惑——.NET一个对象或者一个集合占多少内存?有没有很快速的方法获取,而不是简单的估计分析对象大小? 查了MSDN,和一些其他人的分析,得到解决是托管代码对象 ...
- linux c编程获得当前进程的进程名和执行路径
如何得到当前进程的进程名和执行路径.写了个程序分享一下. [sam@hzhsan test]$ more test_processname.cpp #include <limits.h> ...
- oracle保证读一致性原理
35 这里也有讲解 1:undo segment的概念 当数据库进行修改的时候,需要把保存到以前的old的数据保存到一个地方,然后进行修改,用于保存old数据的segment 就是undo segme ...
- 浅析flannel与docker结合的机制和原理
flannel flannel可以为容器提供网络服务. 其模型为全部的容器使用一个network,然后在每个host上从network中划分一个子网subnet. 为host上的容器创建网络时,从su ...
- java mysql 数据类型对照
java mysql 数据类型对照 类型名称 显示长度 数据库类型 JAVA类型 JDBC类型索引(int) 描述 VARCHAR L+N VARCHAR java.lang. ...
- ubuntu下vsftpd配置
网上的文章好难懂啊..只想要简单粗暴,弄好能用就行啊,复杂的以后研究不行吗...折腾好久,其实弄出来能用不就这么点内容吗... 本文在Ubuntu Server 14.04 amd64系统测试. 安装 ...