欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
您的位置:DIVCSS5首页 > CSS入门 >

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

 

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

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

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

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

 

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

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

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

 

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

 

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

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

 

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

 

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

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

 

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

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

 

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

 

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

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

 

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

 

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

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

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/rumen/r50493.shtml

我要分享到:

必备CSS教程 Essential CSS Tutorials

必备HTML基础教程 Essential HTML Tutorials

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
CSS教程文章修订日期:2018-06-22 08:37 原创:DIVCSS5
本文www.divcss5.com DIVCSS5版权所有。