您的位置:首页 > Web前端 > CSS

css 实现六边形的两种方式,非canvas

2018-01-19 19:53 736 查看

方式一

三个盒子旋转拼成

实现原理:
这个效果的主要css样式有:
1.>transform: rotate(120deg); 图片旋转
2.>overflow:hidden; 超出隐藏
3.>visibility: hidden; 也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置

我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的)。
最外层div(boxF)旋转120度。第二层(boxS)旋转-60度,第三层(boxT)再旋转-60度,此时刚好回正。我们的图片就放在第3层的div背景中。因为前两层div中没有东西,纯粹就是用来旋转得到6边形的,所以对1,2层div设置visibility: hidden; 而第3层div是放图片的,需要显示出来,因此设置visibility: visible; (ps:如果你不对第3层div设置visibility: visible;那它默认就会继承第二层div(boxS)的visibility: hidden; )。经过旋转肯定有超出的部分,因此对3个div都设置overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。还有一点要注意,那就是div的宽高比例必须满足4:5,不然得到的就不是6边形了。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 实现六边形图片展示效果</title>
<style type="text/css">
body, div, img, ul, li
{
margin: 0;
padding: 0;
}
body
{
font-size: 12px;
background-color: #DDD;
min-width: 1200px;
}
ul, ul li
{
list-style: none;
}

.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);
/*background-color: #3f6;*/
}
.boxS
{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
/*background-color: #f63;*/
}
.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;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="boxF">
<div class="boxS">
<div class="boxT" style=""></div>
</div>
</div>
</body>
</html>

方式二

矩形+2个三角

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>原生纯CSS实现六边形效果</title>
<style type="text/css">
.lanren{width: 66px;height: 120px;margin:100px auto;background-color: #008000;position: relative;}
.lanren::before{content:"";width: 0;height: 0;position:absolute;left:-35px;top:0;border-right:35px solid #008000;border-top:60px solid transparent;border-bottom:60px solid transparent;}
.lanren::after{content:"";width: 0;height: 0;position:absolute;right:-35px;top:0;border-left:35px solid #008000;border-top:60px solid transparent;border-bottom:60px solid transparent;}

.lanren2{width: 66px;height: 120px;margin:100px auto;background-color: red;position: relative;}
.lanren2 .left{width: 0;height: 0;position:absolute;left:-35px;top:0;border-right:35px solid red;border-top:60px solid transparent;border-bottom:60px solid transparent;}
.lanren2 .right{width: 0;height: 0;position:absolute;right:-35px;top:0;border-left:35px solid red;border-top:60px solid transparent;border-bottom:60px solid transparent;}
</style>
</head>
<body>
<script src="http://www.lanrenzhijia.com/demos/googlegg.js"></script> <!-- 方法一(不兼容低版本浏览器) -->
<div class="lanren"></div>

<!-- 方法二(兼容主流浏览器) -->
<div class="lanren2">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css