码迷,mamicode.com
首页 > Web开发 > 详细

如何利用CSS写一个六边形?

时间:2018-06-07 19:39:57      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:中间   src   ima   ucs   image   删除   选择   html5   结合   

众所周知,一般情况下div所表现出来的形态是一个矩形,如果给它添加border-radius属性,可以让它成为一个圆角矩形或者是圆形,但是如果希望div表现出更多的形态来呢?

那么我们就来讲讲如何用CSS来写一个六边形。

大家首先来看一下,一个六边形,拆解开来的话,就是一个矩形加左右两个三角形。

技术分享图片

三角形的话很好写,用边框border属性就可以实现。

当我们给一个div非常粗的边框,但是宽度和高度分别都设置为0的时候,我就会得到如下的图形。

技术分享图片

技术分享图片

那么我们只要把其中一条边框给删除,另外两条边框变成透明,这样就能得到一个三角形。

技术分享图片

技术分享图片

那么我们只要把两个三角形和一个矩形拼起来,这样就构成了一个六边形。

有些人要问,这样做一个结构,我不是要用三个元素才能达到?太过繁琐了!

但其实不需要,我们只要结合正确的选择器,只用一个元素就可以达到。

首先将六边形解构成中间矩形,两边三角形,然后我们将中间矩形用div表现出来。

技术分享图片

假设六边形的边都是120px,利用三角函数计算出X的值,双倍之后就是矩形另一条边的长。

技术分享图片

然后我们利用:after和:before这两个选择器做出两边的三角形。计算出Y边长,就是三角形的边框长度。

技术分享图片

注意上下边框使用的宽度。

技术分享图片

技术分享图片

然后以box为作为定位调整一下三角形的位置。

技术分享图片

技术分享图片

另一边使用:after做相同处理。

技术分享图片

技术分享图片

将中间矩形的颜色修改过来就得到了一个六边形。

技术分享图片

来源:千锋HTML5

如何利用CSS写一个六边形?

标签:中间   src   ima   ucs   image   删除   选择   html5   结合   

原文地址:https://www.cnblogs.com/qfdeu/p/9152048.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!