CSS3 六边形绘制
2024-10-11 09:56:14
把一个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】
最新文章
- Html5 绘制五星红旗
- CSS等高布局的6种方式
- dotnetGen 系列终于开源了
- Python 从零学起（纯基础） 笔记 （二）
- javascript 中的console.log和弹出窗口alert
- iTween基础之Audio（音量和音调的变化）
- Android常用正则工具类
- hdu2050 折线分割平面---递推
- Python：fake-useragent 伪装请求头
- Spark MLlib FPGrowth关联规则算法
- You are what you write——沈向洋
- 基于innodb_print_all_deadlocks从errorlog中解析MySQL死锁日志
- 8. svg学习笔记-文本
- 剑指offer（7）斐波那契数列
- Centos6.8安装nginx(一)
- VC++进行窗口枚举
- 移动端input验证只允许有数字 在safari浏览器一直不成功解决
- hexo安装总结
- 引用js文件
- Final发布用户使用报告 -- Thunder团队