html中这种图片是如何布局的，又不是正方形？

Question

Answer 1

具体就是一个标签旋转逆时针120度，然后内部的标签旋转顺时针60度，内部的顺时针再旋转60度，相当于图片转正了，overflow: hidden;visibility: hidden;多余的减掉

            .box{
                width: 200px;
                height: 250px;
                overflow: hidden;
                visibility: hidden;
                box-sizing: border-box;
            }
            img{
                width: 100%;
                vertical-align: middle;
                height: 100%;
                
            }
            .box1{
                transform: rotate(-120deg);        
                float: left;    
                margin-right: 10px;
            }
            .box2{        
                transform: rotate(60deg);
            }
            .box3{    
                transform: rotate(60deg);
                visibility: visible;
            }


        <div class="box1 box">
            <div class="box2 box">
                <div class="box3 box">
                    <img src="img/xh.jpg"/>
                </div>
            </div>
        </div>

Answer 2

css绘制图形

Answer 3

有没有链接审查下元素，初步判断是根据定位

Answer 4

有可能用canvas实现

Answer 5

按照教程一步一步走，代码一个一个敲。 css3实现六边形列表

Answer 6

这种东西最好就是照着别人的样子撸代码，不会的地方控制台看，实在不会的再搜索，提问什么的

Answer 7

正六边形是由六个三角形组成的，你可以先在css里面弄一个三角形，后面旋转就可以得到另外五个三角形就可以组成六边形了