前端求助:怎么控制不规则的 div - V2EX
首页
注册
登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请
登录
V2EX
问与答
前端求助:怎么控制不规则的 div
small class="gray">
ibeta
2015-08-11 22:57:34 +08:00
2873 次点击
这是一个创建于 3715 天前的主题,其中的信息可能已经有所发展或是发生改变。
需求:
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
多边形
div
尺寸
5 条回复
2015-08-12 21:50:15 +08:00
1
ljbha007
2015-08-11 23:00:02 +08:00
直接上成品效果的图片 oh yeah
2
ibeta
OP
2015-08-11 23:09:02 +08:00 via Smartisan T1
@
ljbha007
能上就不用这么纠结了(><)
3
Septembers
2015-08-11 23:22:29 +08:00 via Android
svg绘制
4
P233
2015-08-12 00:13:34 +08:00
1
我会这么写吧
http://jsbin.com/jibehagawu
5
ibeta
OP
2015-08-12 21:50:15 +08:00
@
P233
最后用transform 2D 做了个遮盖层解决了,十分感谢。
关于
帮助文档
自助推广系统
 
博客
API
FAQ
Solana
857 人在线
最高记录 6679
Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 24ms
UTC 22:16
PVG 06:16
LAX 15:16
JFK 18:16
Do have faith in what you're doing.
ubao
snddm
index
pchome
yahoo
rakuten
mypaper
meadowduck
bidyahoo
youbao
zxmzxm
asda
bnvcg
cvbfg
dfscv
mmhjk
xxddc
yybgb
zznbn
ccubao
uaitu
acv
GXCV
ET
GDG
YH
FG
BCVB
FJFH
CBRE
CBC
GDG
ET54
WRWR
RWER
WREW
WRWER
RWER
SDG
EW
SF
DSFSF
fbbs
ubao
fhd
dfg
ewr
dg
df
ewwr
ewwr
et
ruyut
utut
dfg
fgd
gdfgt
etg
dfgt
dfgd
ert4
gd
fgg
wr
235
wer3
we
vsdf
sdf
gdf
ert
xcv
sdf
rwer
hfd
dfg
cvb
rwf
afb
dfh
jgh
bmn
lgh
rty
gfds
cxv
xcv
xcs
vdas
fdf
fgd
cv
sdf
tert
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
sdf
shasha9178
shasha9178
shasha9178
shasha9178
shasha9178
liflif2
liflif2
liflif2
liflif2
liflif2
liblib3
liblib3
liblib3
liblib3
liblib3
zhazha444
zhazha444
zhazha444
zhazha444
zhazha444
dende5
dende
denden
denden2
denden21
fenfen9
fenf619
fen619
fenfe9
fe619
sdf
sdf
sdf
sdf
sdf
zhazh90
zhazh0
zhaa50
zha90
zh590
zho
zhoz
zhozh
zhozho
zhozho2
lislis
lls95
lili95
lils5
liss9
sdf0ty987
sdft876
sdft9876
sdf09876
sd0t9876
sdf0ty98
sdf0976
sdf0ty986
sdf0ty96
sdf0t76
sdf0876
df0ty98
sf0t876
sd0ty76
sdy76
sdf76
sdf0t76
sdf0ty9
sdf0ty98
sdf0ty987
sdf0ty98
sdf6676
sdf876
sd876
sd876
sdf6
sdf6
sdf9876
sdf0t
sdf06
sdf0ty9776
sdf0ty9776
sdf0ty76
sdf8876
sdf0t
sd6
sdf06
s688876
sd688
sdf86