阅读 1982

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

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

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

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

b20ee61ea78b429a985006f5cdd82868.png

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

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

d78667c6254e425f8520b6e9cd9c94eb.png

3e5189f92e4e48b9b7933e1ccd200bdf.png

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

089578ec307b484fa2f1acc5bd4a0fc9.png

c5561f5d27294a819e318d778062333a.png

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

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

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

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

dee58dc698014ed098fd7bc7f3a1be18.png

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

33e52ba0a521485ba3200ccec5d46b7d.png

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

07ce7e2590e14bf09ee6186a3fd348e4.png

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

0d415bb96ce8409b9d5ce12363472971.png

14d7edbe1ed84852846afff9d65c105a.png

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

de2a4f9248dd4021851581c77b5f066b.png

2e851752505f46babca86db07f5d2b8c.png

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

e199cc43b2b2465ea5aadf107006760f.png

3f035d60b9dd45fcaddec2bbf83e907c.png

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

cacf367ca6a84bf1995858d41cd66d00.png


文章分类
前端
文章标签