请问怎么进行布局--UI的设计稿

Question

前端用bootstrap框架，具体如何布局，望大神指导。。。

然后切得图片如下

Answer 1

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

Answer 2

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

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

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

注意层级关系

个别浏览器还需多调试

之前的回答过的答案已删

Answer 3

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都行

Answer 4

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

Answer 5

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

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

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