直接用absolute。搭配百分比。粗暴的完成这一个布局。。。。。

如果不考虑IE的CSS3兼容性可以考虑用rotate来做、甚至六边形链接的都可以做出来

题主编辑了一下答案、我也改一下吧、

既然图片切成了那样、那就根据高度宽度二分之一的算法、absolute+z-index做重叠就好了

注意层级关系

个别浏览器还需多调试

之前的回答过的答案已删

css:

.fa{
    rotateZ(45deg);
}
.son{
    rotateZ(-45deg);
    background:url(图片放这)
}

html(当然是伪代码)

<.fa><.son></.son></.fa>
<.fa><.son></.son></.fa>
<.fa><.son></.son></.fa>
<.fa><.son></.son></.fa>
<.fa><.son></.son></.fa>

大概这样的，位置想用定位和transform都行

有个粗暴的方法，如果不用加特效或交互的话，直接整块切下来。。
用css3的话，就用transform的rotate

仔细观察的话，发现底图可以是一张正常方向的大图，那么如果使用css去旋转p的话，就会出现问题，底图也跟着变了。

解决方法一：做一个绝对定位且宽高100%的p，根据需要镂空的形状抠出一张白色和透明相间的PNG图作为p的背景，记得p的背景也要100%填充。将这个p直接覆盖在原来的colorful图片上面，就能实现想要的效果了，是最简单快速的方法，并且全浏览器兼容。哈哈，搞定，交任务。后面再慢慢改用css实现。

解决方法二：研究下css3的clip属性，背景裁切，这个css属性就是为做这种效果而生的，不过要跟IE拜拜了。多花点时间，肯定能磨出来，加油。