CSS 问题：如何实现这个效果？

[83f420984]

效果图：


实现方法：

先把主体逆时针旋转4度，并且添加背景图片，内层文字内容反转4度，就基本实现想要的效果了，但问题是，主体的背景也跟着逆时针旋转4度，那要如何去实现效果呢？ 不知道我有没有表达清楚 :(

昨天想到个方法，就是把背影图在PS里反转，然后导出平铺就行了



[coolicer]

只要切黑白那一小块就可以了。

[83f420984]

@coolicer 如何切？

[coolicer]

@83f420984 切个大图（分辨率大兼容多一点），就是旋转那个地方用图片而已。当成一个整体，还不明白？

[coolicer]

或者说黑白交替那个地方要切，其他的就css就可以了

[pockry]

CSS Shape： http://zhuanlan.zhihu.com/FrontendMagazine/19774074

[tension]

理论上，切个

就ok了，但是 还是整张比较好。。或者找个三角形在上面盖住

[sneezry]

直接用border就好了

[learnshare]

div 做一个白色的三角形就好了，旋转多麻烦

[momou]

{
width: 0;
height: 0;
border-top: 100px solid white;
border-right: 3000px solid transparent;
}

[hkongm]

transform skew

[Kaiyuan]

http://jsfiddle.net/Kaiyuan/a9xn172u/

[83f420984]

@Kaiyuan 谢谢,老兄还特意写了个demo

[miniwade514]

在兼容CSS3 Transform的浏览器里用CSS就可以做，其他浏览器就得靠切图实现了。根据你的项目需要兼容的浏览器类型来决定用哪种方式实现。