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的心情吗

(╯‵□′)╯︵┻━┻】

转载于:https://www.cnblogs.com/jason-yijun/p/5656767.html