css 实现六边形的两种方式，非canvas_css 实现6变形盒子-CSDN博客

本文链接：https://blog.csdn.net/qiqi_77_/article/details/79110202

方式一

三个盒子旋转拼成

实现原理：

这个效果的主要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>