使用 CSS3 代码制作六边形图形教程 - 文章教程

使用 CSS3 代码制作六边形图形教程

发布于 2018-06-30 字数 6767 浏览 2202 评论 0

这里是一个 100px×100px 的正方形 DIV

纯css3制作六边形图形教程

height: 100px;
width: 100px;
border: 30px solid #999;

设置每一边不同的颜色

纯css3制作六边形图形教程

height: 100px;
width: 100px;
border-top: 30px solid #C66;
border-bottom: 30px solid #6C6;
border-left: 30px solid #66C;
border-right: 30px solid #CC6;

现在,如果我们放弃设置高度和显式设置宽度的 DIV 是0,我们得到如下:

纯css3制作六边形图形教程

width: 0;
border-top: 30px solid #C66;
border-bottom: 30px solid #6C6;
border-left: 30px solid #66C;
border-right: 30px solid #CC6;

设置顶部、左、右边框为透明的,你会得到这个:

纯css3制作六边形图形教程

width: 0;
border-bottom: 30px solid #6C6;
border-left: 30px solid transparent;
border-right: 30px solid transparent;

侧边界不一定大小的底部边框相同。在这里 30px52px 双方:

纯css3制作六边形图形教程

width: 0;
border-bottom: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

在这里 div 而不是一个底部边界上边界:

纯css3制作六边形图形教程

width: 0;
border-top: 30px solid #6C6;
border-left: 52px solid transparent;
border-right: 52px solid transparent;

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

纯css3制作六边形图形教程

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° 。我们周围的一些方向,使用 float:left 下降显式设置 width0

纯css3制作六边形图形教程

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;

六角形的两个方向可以平铺。第一方向涉及 margin-bottom- 26pxmargin-left3 每个六边形 margin-left53px 在偶数行:

纯css3制作六边形图形教程

.hex {
    float: left;
    margin-right: -26px;
    margin-bottom: -50px;
}
.hex .left {
    float: left;
    width: 0;
    border-right: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
}
.hex .middle {
    float: left;
    width: 60px;
    height: 104px;
    background: #6C6;
}
.hex .right {
    float: left;
    width: 0;
    border-left: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex.even {
    margin-top: 53px;
}

第二方向涉及  margin-right  of  -26px and  margin-bottom of -50px 每个六边形以及上边距 margin-top: 53px

纯css3制作六边形图形教程

.hex {
    float: left;
    margin-right: -26px;
    margin-bottom: -50px;
}
.hex .left {
    float: left;
    width: 0;
    border-right: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
}
.hex .middle {
    float: left;
    width: 60px;
    height: 104px;
    background: #6C6;
}
.hex .right {
    float: left;
    width: 0;
    border-left: 30px solid #6C6;
    border-top: 52px solid transparent;
    border-bottom: 52px solid transparent;
}
.hex-row {
    clear: left;
}
.hex.even {
    margin-top: 53px;
}

要完成的事情,这是一个 CSS 三维透视一个快速演示变换应用于六角网格:

纯css3制作六边形图形教程

-webkit-transform: perspective(600px) rotateX(60deg);
-moz-transform: perspective(600px) rotateX(60deg);
-ms-transform: perspective(600px) rotateX(60deg);
-o-transform: perspective(600px) rotateX(60deg);
transform: perspective(600px) rotateX(60deg);

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0