V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
ibeta
V2EX  ›  问与答

前端求助:怎么控制不规则的 div

  •  
  •   ibeta · 2015-08-11 22:57:34 +08:00 · 2505 次点击
    这是一个创建于 3403 天前的主题,其中的信息可能已经有所发展或是发生改变。
    需求:
    1. 4个兄弟图片,是如下图的不规则的多边形 图片见 http://loveqq.me/v2sos/m2.png
    2. 每次选取一个元素,高亮(加阴影),进行坐标调整,尺寸变换。

    过程:
    1. 使用span画出一个遮盖层,满足要求,但是兼容性很差,细节完全没法调整。代码见http://loveqq.me/v2sos/help.html
    2. 使用css border画一个多边形遮盖曾,但是无法高亮和尺寸变换。参考了http://t.cn/RLms8Xi
    3. 使用svg 画一个多边形,这个看了一天连阴影都没加上。。。参考了http://t.cn/RLmsjXU

    问题:
    1. 遇到这样的情况,大家会怎么处理呢?希望能给个思路。谢谢
    2. 我是想做一个多边形的div,这样控制阴影,尺寸坐标都会比较好调整,但是不知道怎么实现o(╯□╰)o
    5 条回复    2015-08-12 21:50:15 +08:00
    ljbha007
        1
    ljbha007  
       2015-08-11 23:00:02 +08:00
    直接上成品效果的图片 oh yeah
    ibeta
        2
    ibeta  
    OP
       2015-08-11 23:09:02 +08:00 via Smartisan T1
    @ljbha007 能上就不用这么纠结了(>﹏<)
    Septembers
        3
    Septembers  
       2015-08-11 23:22:29 +08:00 via Android
    svg绘制
    P233
        4
    P233  
       2015-08-12 00:13:34 +08:00   ❤️ 1
    我会这么写吧 http://jsbin.com/jibehagawu
    ibeta
        5
    ibeta  
    OP
       2015-08-12 21:50:15 +08:00
    @P233 最后用transform 2D 做了个遮盖层解决了,十分感谢。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5676 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 03:00 · PVG 11:00 · LAX 19:00 · JFK 22:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.