使用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;}
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网行业资讯频道,感谢您对编程网的支持。