首页前端开发CSS如何利用CSS写一个六边形?

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

时间2024-05-23 21:06:03发布访客分类CSS浏览88
导读:众所周知,一般情况下div所表现出来的形态是一个矩形,如果给它添加border-radius属性,可以让它成为一个圆角矩形或者是圆形,但是如果希望div表现出更多的形态来呢? 那么我们就来讲讲如何用CSS来写一个六边形。 大家首先来看一下,...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: 如何利用CSS写一个六边形?
本文地址: https://pptw.com/jishu/666566.html
WordPress账户登录两步安全Two Factor插件安装与使用 WordPress调用当天文章更新数量以及当前分类更新数代码

游客 回复需填写必要信息