技术分享帖教你如何利⽤CSS写⼀个六边形？
众所周知，⼀般情况下div所表现出来的形态是⼀个矩形，如果给它添加border-radius属性，可以让它成为⼀个圆⾓矩形或者是圆形，但是如果希望div表现出更多的形态来呢？
那么我们就来讲讲如何⽤CSS来写⼀个六边形。
⼤家⾸先来看⼀下，⼀个六边形，拆解开来的话，就是⼀个矩形加左右两个三⾓形。
三⾓形的话很好写，⽤边框border属性就可以实现。
当我们给⼀个div⾮常粗的边框，但是宽度和⾼度分别都设置为0的时候，我就会得到如下的图形。div border属性
那么我们只要把其中⼀条边框给删除，另外两条边框变成透明，这样就能得到⼀个三⾓形。
那么我们只要把两个三⾓形和⼀个矩形拼起来，这样就构成了⼀个六边形。
有些⼈要问，这样做⼀个结构，我不是要⽤三个元素才能达到？太过繁琐了！
但其实不需要，我们只要结合正确的选择器，只⽤⼀个元素就可以达到。
⾸先将六边形解构成中间矩形，两边三⾓形，然后我们将中间矩形⽤div表现出来。
假设六边形的边都是120px，利⽤三⾓函数计算出X的值，双倍之后就是矩形另⼀条边的长。
然后我们利⽤:after和:before这两个选择器做出两边的三⾓形。计算出Y边长，就是三⾓形的边框长度。
注意上下边框使⽤的宽度。
然后以box为作为定位调整⼀下三⾓形的位置。
另⼀边使⽤:after做相同处理。
将中间矩形的颜⾊修改过来就得到了⼀个六边形。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。