霍者博客

霍者教你如何利用CSS写一个等边六边形

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

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

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

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

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

<style>
.box{width:0px;height:0px;border:100px #000 solid;border-color:#f00 #0f0 #00f #0ff;}
</style>

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

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

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

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

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

假设六边形的边都是120px,利用三角函数计算出X的值,双倍之后就是矩形另一条边的长,是不是才发现学好网页,数学逻辑也要有一点呢,哈哈。

.box{width:120px;height:208px;background:#f00;}

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

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

<style>
.box:before{
content:"";
width:0px;
height:0px;
border-right:60px #f00 solid;
border-left:none;
border-top:104px solid transparent;
border-bottom:104px solid transparent;
}
</style>

然后以box为作为定位调整一下三角形的位置,特别注意新学者常会忘记绝对定位(absolute)需要父级DIV设置相对定位(relative)来配合使用的,否则绝对定位的参考位置就是浏览器的左上角,而不是父级的左上角。

position:absolute;top:0;left:-60px;

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

<style>
.box:after{content:"";width:0px;height:0px;border-left:60px #f00 solid;
border-right:none;border-top:104px solid transparent;
border-bottom:104px solid transparent;position:absolute;top:0;left:120px;}
</style>

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

上面是拆解开的分散的代码,以下给出一份完整的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>霍者教你如何利用CSS写一个等边六边形</title>
<style>
.box{width:120px;height:208px;background:#f00;position:relative;margin:0 auto;}
.box:before{content:"";width:0px;height:0px;border-right:60px #0F0 solid; border-left:none;border-top:104px solid transparent;border-bottom:104px solid transparent;position:absolute;top:0;left:-60px;}
.box:after{content:"";width:0px;height:0px;border-left:60px #0F0 solid; border-right:none;border-top:104px solid transparent;border-bottom:104px solid transparent;position:absolute;top:0;left:120px;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

原创文章请注明转载自霍者博客本文地址:http://www.huozheweb.com/post/758.html,标题:霍者教你如何利用CSS写一个等边六边形

【我来说两句】
分享到:

评论 1

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

    1.购秀时间  2018-11-20 21:10:22 回复
    技术流高手。
    2.广安网站建设  2018-11-26 09:38:33 回复
    厉害厉害