The idea of HTML hexagon masks

A few days ago when browsing the Web page accidentally found a hexagonal mask effect (in fact, DNF official website to see), today a whim to restore a hexagon

Actually the first to do hexagon my idea is to use:: Before and:: 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;Ten position:Absolute; One Top:50px; A  Left:100px; - background:Rgba (0,0,255,0.3); -} the . Six4::before{ - content:" "; - width:100%; - Height:100%; + position:Absolute; - Transform:Rotate ( -60deg); + background:Rgba (0,0,255,0.3); A} at . Six4::after{ - content:" "; - width:100%; - Height:100%; - position:Absolute; - Transform:Rotate (60deg); in background:Rgba (0,0,255,0.3); -}

The effect is like this.

So the hexagon is out.

But

Since before and after have been rotated, the background image is rotated as the background map is inserted, and because of the relationship between the. Six4 and before, after hierarchies, the after is affected by the mask div when the mask is added, so this method is temporarily passed by pass

But then we will find that the last step we made out of the hexagon, in fact, in its interior, there is a darker color of the small positive hexagon, so that we open up the idea of the next

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;Ten Top:50px; One Transform:Rotate ( -120deg); A} - . Six2{ - position:Absolute; the Transform:Rotate (60deg); -} - . Six3{ - position:Absolute; + Transform:Rotate (60deg); -}

<Divclass= "Box1">    <Divclass= "Six1">        <Divclass= "Six2">            <Divclass= "Six3"></Div>        </Div>    </Div></Div>

In this case, the three Div is nested with each other and rotated separately to get the same appearance as the first method.

Next we just need to hide 30% blue and 60% Blue, leaving only three div and overlapping 90% blue.

The hidden method is to visibility the first level and the second level div : hidden;and the third level div visibility: visible;

In particular, it is important to note that the visibility property inherits the value of the visibility property of the second-level div if the third-level Div does not change the property value.

At the same time, the first level div is exceeded hidden overflow: hidden;

The principle here is that visibility:hidden, although it looks similar to Display:none, but Visibility:hidden retains the position of the element, So the first level of Overflow:hidden will hide the part beyond the first level div and keep the area of 90% blue separately "PS because the first level of the second-level Div is Visibility:hidden, all the original 90% blue area color will be reduced to 30% blue, Because the location information is retained, so 90% Blue is not within the Overflow:hidden range, it can leave the hexagon area "

"Ps:30% Blue is one of my personal names, corresponding to the color of Rgba (0,0,255,0.3)"

Then the mask effect can be done by the third level div under the next width:100%;height:100% of the fourth level Div, set: hover, with animation or transition to complete

And this hexagon is from if the aspect ratio between √3:2 to 2:√3, then the 12-side shape, less than √3:2 is the vertical positive hexagon, greater than 2:√3 is the transverse positive hexagon

"PPS: Motor you know when I'm done with this effect, I go back to DNF home to see his hexagonal approach, the result is the mood of flash

(╯‵-′) ╯︵┻━┻ "

The idea of HTML hexagon masks