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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3657 天前的主题，其中的信息可能已经有所发展或是发生改变。

效果图：

实现方法：

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

第 1 条附言 · 2014-11-27 16:00:14 +08:00

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

逆时针

主体

旋转

13 条回复 • 2014-11-26 18:01:37 +08:00

coolicer

2014-11-26 11:25:40 +08:00

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

83f420984

2014-11-26 11:26:52 +08:00

@coolicer 如何切？

coolicer

2014-11-26 11:29:09 +08:00

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

coolicer

2014-11-26 11:30:05 +08:00

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

pockry

2014-11-26 11:30:27 +08:00

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

tension

2014-11-26 11:32:20 +08:00

理论上，切个

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

sneezry

2014-11-26 11:51:15 +08:00 via iPhone

直接用border就好了

learnshare

2014-11-26 11:53:48 +08:00

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

momou

2014-11-26 11:57:40 +08:00

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

hkongm

2014-11-26 14:14:17 +08:00

transform skew

Kaiyuan

2014-11-26 15:49:32 +08:00

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

83f420984

2014-11-26 16:23:43 +08:00

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

miniwade514

2014-11-26 18:01:37 +08:00

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