V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
83f420984
V2EX  ›  程序员

CSS 问题:如何实现这个效果?

  •  
  •   83f420984 · 2014-11-26 11:22:52 +08:00 · 2921 次点击
    这是一个创建于 3649 天前的主题,其中的信息可能已经有所发展或是发生改变。
    效果图:

    
    实现方法:

    先把主体逆时针旋转4度,并且添加背景图片,内层文字内容反转4度,就基本实现想要的效果了,但问题是,主体的背景也跟着逆时针旋转4度,那要如何去实现效果呢? 不知道我有没有表达清楚 :(
    第 1 条附言  ·  2014-11-27 16:00:14 +08:00
    昨天想到个方法,就是把背影图在PS里反转,然后导出平铺就行了

    
    13 条回复    2014-11-26 18:01:37 +08:00
    coolicer
        1
    coolicer  
       2014-11-26 11:25:40 +08:00
    只要切黑白那一小块就可以了。
    83f420984
        2
    83f420984  
    OP
       2014-11-26 11:26:52 +08:00
    @coolicer 如何切?
    coolicer
        3
    coolicer  
       2014-11-26 11:29:09 +08:00   ❤️ 1
    @83f420984 切个大图(分辨率大兼容多一点),就是旋转那个地方用图片而已。当成一个整体,还不明白?
    coolicer
        4
    coolicer  
       2014-11-26 11:30:05 +08:00
    或者说黑白交替那个地方要切,其他的就css就可以了
    pockry
        5
    pockry  
       2014-11-26 11:30:27 +08:00   ❤️ 2
    tension
        6
    tension  
       2014-11-26 11:32:20 +08:00   ❤️ 1
    理论上,切个

    就ok了,但是 还是整张比较好。。或者找个三角形在上面盖住
    sneezry
        7
    sneezry  
       2014-11-26 11:51:15 +08:00 via iPhone   ❤️ 1
    直接用border就好了
    learnshare
        8
    learnshare  
       2014-11-26 11:53:48 +08:00   ❤️ 1
    div 做一个白色的三角形就好了,旋转多麻烦
    momou
        9
    momou  
       2014-11-26 11:57:40 +08:00   ❤️ 1
    {
    width: 0;
    height: 0;
    border-top: 100px solid white;
    border-right: 3000px solid transparent;
    }
    hkongm
        10
    hkongm  
       2014-11-26 14:14:17 +08:00   ❤️ 1
    transform skew
    Kaiyuan
        11
    Kaiyuan  
       2014-11-26 15:49:32 +08:00   ❤️ 1
    83f420984
        12
    83f420984  
    OP
       2014-11-26 16:23:43 +08:00
    @Kaiyuan 谢谢,老兄还特意写了个demo
    miniwade514
        13
    miniwade514  
       2014-11-26 18:01:37 +08:00
    在兼容CSS3 Transform的浏览器里用CSS就可以做,其他浏览器就得靠切图实现了。根据你的项目需要兼容的浏览器类型来决定用哪种方式实现。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1077 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 23:22 · PVG 07:22 · LAX 15:22 · JFK 18:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.