使用css3怎么实现一个六边形边框？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
实现代码：
HTML代码
<div class="boxF"> <div class="boxS"> <div class="boxT" style="background-image: url(tupian.jpg);"></div> </div> </div>
CSS代码
.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;
}看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注亿速云行业资讯频道，感谢您对亿速云的支持。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
