阅读CSS Secrets（九）

平行四边形

这里需要用到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属性，不过这种属性暂时没了解过。。。