通过纯css3代码实现六边形边框

最外层boxF旋转120度、第二层boxS旋转-60度、第三层boxT再旋转-60度,此时刚好回正,然后把图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置visibility: hidden; 而第3层div是放图片的,需要显示出来,因此设置visibility: visible;

经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。

liubianxing.png

注意:

  1. 如果不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility: hidden;
  2. div的宽高比例必须满足4:5,不然得到的就不是六边形了。

实现原理:

  • transform: rotate(120deg);图片旋转
  • overflow:hidden;超出隐藏
  • visibility: hidden;也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置

实现代码:

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;
}

教程转自:https://www.cnblogs.com/wwlhome/p/5970442.html

关键词: css3

网友留言(0条)

发表评论