Example code for implementing hexagonal borders with CSS3

The outermost boxF rotates 120 degrees, the second boxS rotates -60 degrees, and the third boxT rotates -60 degrees again. Now they are just back to the original position, and then the picture is placed on the div background of the third layer. Because there is nothing in the first two div layers, they are purely used to rotate to get the hexagon, so the visibility: hidden is set for the 1st and 2nd div layers; and the 3rd div layer is for pictures and needs to be displayed, so visibility: visible is set;

There will definitely be excess parts after rotation, so set overflow:hidden for all three divs; after rotating and hiding the excess parts, we can get the hexagon we want.

Notice:

1. If you do not set visibility: visible; for the third layer div, it will inherit the visibility: hidden of the second layer div (boxS) by default;
2. The width-to-height ratio of the div must be 4:5, otherwise it will not be a hexagon.

Implementation principle:

•transform: rotate(120deg); Image rotation
•overflow:hidden; overflow hidden
•visibility: hidden; is also hidden, similar to display:none;, but the difference is that although it is hidden, it still occupies a position on 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;
}

Summarize

The above is the example code of how to implement hexagonal border in CSS3 introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!