HTML六边形蒙版的思路
前几天逛网页的时候偶然发现了个六边形的蒙版效果(其实是逛DNF官网看到的),今儿个突发奇想还原一个六边形
其实最开始做六边形我的思路是使用::before和::after
1 .box2{ 2 width: 400px; 3 height: 400px; 4 border: 1px solid black; 5 position: relative; 6 } 7 .six4{ 8 width: 100px; 9 height: 173px; 10 position: absolute; 11 top: 50px; 12 left: 100px; 13 background: rgba(0,0,255,0.3); 14 } 15 .six4::before{ 16 content:" "; 17 width: 100%; 18 height: 100%; 19 position: absolute; 20 transform: rotate(-60deg); 21 background: rgba(0,0,255,0.3); 22 } 23 .six4::after{ 24 content:" "; 25 width: 100%; 26 height: 100%; 27 position: absolute; 28 transform: rotate(60deg); 29 background: rgba(0,0,255,0.3); 30 }
做出来的效果是这样的
这样六边形就出来了
but
由于before和after经过了旋转,在插入背景图的时候背景图也会跟着旋转,同时由于.six4和before、after层级之间的关系,导致了在添加蒙版的时候,after会被蒙版div所影响,所以这种方法暂时被pass
但是接下来我们会发现,上一步我们做出来的正六边形中,实际上再其内部,还有一个颜色更深的小一些的正六边形,这样就为我们接下来打开了思路
1 .six1,.six2,.six3{ 2 width: 200px; 3 height: 300px; 4 background: rgba(0,0,255,0.3); 6 } 7 .six1{ 8 position: absolute; 9 left: 100px; 10 top: 50px; 11 transform: rotate(-120deg); 12 } 13 .six2{ 14 position: absolute; 15 transform: rotate(60deg); 16 } 17 .six3{ 18 position: absolute; 19 transform: rotate(60deg); 20 }
<div class="box1"> <div class="six1"> <div class="six2"> <div class="six3"></div> </div> </div> </div>
这样的话,通过三个DIV相互嵌套,并且分别进行旋转,就能得到与第一种方法相同的外观效果
接下来我们只需要把30%蓝以及60%蓝进行隐藏,只留下三个DIV同时重叠的90%蓝即可
隐藏方法是对第一级以及第二级DIV进行visibility: hidden;,以及第三级DIV进行visibility: visible;
这里面尤其需要注意的是,visibility属性由于具有继承性,如果在第三级DIV不进行属性值的更改,那么其会默认的继承第二级DIV的visibility属性值
同时对第一级DIV进行超出隐藏overflow: hidden;
这里面的原理是visibility:hidden虽然看上去与display:none有着相似的显示效果,但是visibility:hidden会保留该元素的位置信息,所以在第一级的overflow:hidden会隐藏掉超出第一级DIV的部分而单独保留90%蓝的区域【ps由于第一级第二级DIV被visibility:hidden,所有原90%蓝的区域颜色会降低到30%蓝,而由于位置信息被保留,所以90%蓝不在overflow:hidden范围之内,故能留下六边形区域】
【ps:30%蓝是我个人的一种叫法,对应颜色为rgba(0,0,255,0.3)】
再之后的蒙版效果可以通过在第三级DIV下再下一个width:100%;height:100%的第四级div,设置:hover,配合animation或者transition来完成
而这个正六边形由如果宽高比在√3:2到2:√3之间的话,则为12边形,小于√3:2则为竖向正六边形,大于2:√3则为横向正六边形
【pps:马达你们知道等我做完这个效果之后回去DNF首页看他那个六边形的做法,结果是flash的心情吗
(╯‵□′)╯︵┻━┻】