Example code of realizing hexagon border in CSS3

Time:2020-1-13

The outer layer boxf rotates 120 degrees, the second layer boxs rotates – 60 degrees, and the third layer boxt rotates – 60 degrees again. At this time, it just returns to normal, and then put the picture in the div background of the third layer. Because there is nothing in the first two layers of divs, which are purely used to rotate to get 6-sided shapes, the visibility: hidden is set for the 1-layer and 2-layer divs, and the visibility: visible is set for the 3-layer divs, which need to be displayed;

After rotation, there must be excess parts, so set overflow: hidden for all three divs; after rotation and hiding the excess parts, we can get the 6-sided shape we want.

Be careful:

1. If the visibility: visible is not set for layer 3 div, it will inherit the visibility: hidden of layer 2 div (boxs) by default;
2. The ratio of width to height of div must meet 4:5, otherwise, it will not be hexagon.

Implementation principle:

• transform: rotate (120Deg); picture rotation
• overflow: hidden
• visibility: hidden; is also hidden, similar to display: none; but the difference is that although it is hidden, it still occupies a place in the web page

Implementation code:

HTML code


<div class="boxF">
    <div class="boxS">
        <div class="boxT" style="background-image: url(tupian.jpg);"></div>
    </div>
</div>

CSS code


.boxF, 
.boxS, 
.boxT, 
.overlay {
 width: 200px;
 height: 250px;
 overflow: hidden;
}
.boxF, 
.boxS {
 visibility: hidden;
}
.boxF {
 transform: rotate(120deg);
 float: left;
 margin-left: 10px;
 -ms-transform: rotate(120deg);
 -moz-transform: rotate(120deg);
 -webkit-transform: rotate(120deg);
}
.boxS {
 transform: rotate(-60deg);
 -ms-transform: rotate(-60deg);
 -moz-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
}
.boxT {
 transform: rotate(-60deg);
 background: no-repeat 50% center;
 background-size: 125% auto;
 -ms-transform: rotate(-60deg);
 -moz-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
 visibility: visible;
}

summary

The above is the example code of realizing hexagon frame in CSS3 introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave me a message and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!