css-六边形、平行四边形、扇形实现

 六边形 css实现：

先看结构 

可以看出是三个div进行组合 形成六边形 通过overflow: hidden; 最终展示出六边形

按照这个思路 画出三个矩形 

完整代码：

html 
 

            

                

                    

                

            
            
        

　　平行四边形 利用skew可以简单实现：

//大盒子
    width: 3.0885rem;
    height: 3.0885rem;
    background: #EA5A45;
    color: #fff;
    transform: skew(-15deg);

　　内容：（内容要倾斜回来）

    transform: skew(15deg);

 扇形的实现

草图如下

我思考的方法 ，首先这是一个圆中包含五个扇形，这里就遇到一个问题 扇形 如何绘制出来  （其实做的不是扇形，而是圆形盒子overflo:hidden 出来的假象 ）

下面解释一下（基于一种css3的方法）

html结构 由两部分组成  包裹容器的盒子 以及 5个扇形

首先 每一个模块 都是一个矩形，通过旋转角度 来实现角度的划分

.rotate {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -250px;
            margin-top: -250px;

            width: 500px;
            height: 500px;
            border-radius: 50%;
            /*将溢出部分隐藏，达到扇形的效果*/
            overflow: hidden;
        }
        /*
            skewy 的角度计算方法
            圆形 360deg 5个部分  360/5=72度 72-90=-18deg 
            rotate 角度计算方法
            360deg 5个部分  分别为 0-72     (deg)
                                72-144 
                                144-216
                                216-288
                                288-360
            */
        .rotate span:first-child {
            transform: rotate(360deg) skewY(-18deg);
            background: plum;
        }
        .rotate span:nth-child(2) {
            transform: rotate(72deg) skewY(-18deg);
            background: yellow;
        }
        .rotate span:nth-child(3) {
            transform: rotate(144deg) skewY(-18deg);
            background: pink;
        }
        .rotate span:nth-child(4) {
            transform: rotate(216deg) skewY(-18deg);
            background: paleturquoise;
        }
        .rotate span:last-child {
            transform: rotate(288deg) skewY(-18deg);
            background: palevioletred;
        }
        .rotate span{
            display: block;
            overflow: hidden;
            position: absolute;
            top: 0;
            right: 0;
            /*宽高为容器的一半  中心偏移 为圆心位置 */
            width: 50%;
            height: 50%;
            transform-origin: 0 100%;
        }