平行四边形
这里需要用到css3的transform属性
.d2{
width:100px;
height:100px;
background:darkorange;
transform:skewY(-10deg);
}
使用skewY来制作跟向Y轴倾斜的四边形
1.png
多个div然后浮动后就可以做成倾斜角度的导航栏了
2.png
但是这种会造成元素内的文本和子节点都变成倾斜，会使效果混乱。。
当然我可以在内部使用嵌套一个div然后负角度倾斜来抵消父元素的样式，但是这样会多出一个元素。
Diamond images
1.使用transform-based解决方案，利用旋转，然后img反旋转，把内容转正，同时父元素把多余的部分隐藏，就
<div><img></div>
div{
width:200px;
transform:rotate(45deg);
overflow:hidden;
margin:200px;
}
img{
width:200px;
height:200px;
transform:rotate(-45deg);
}
3.png
然而这并不是我们想要，我们想要的是四边形，而图片是根据div大小来的，所以剪切后肯定是八边形，当我们把图片变大1.42倍时，就可以实现四边形了
img{
width:200px;
height:200px;
transform:rotate(-45deg) scale(1.42);
}
不过这种利用transform的办法最少需要2个元素，而且利用hack 才能实现，有种简单的办法clip-path属性，不过这种属性暂时没了解过。。。
