[英]How do I make two arrows in css
我只想使用CSS创建箭头
示例您可以看到http://jsfiddle.net/b9Yfc/
上
<div id="arrow"><div id="arrow-inner"></div></div>
我希望将arrow-inner
放置在arrow
,结果应该像
如何实现我的目标?
发挥position
属性
在#arrow
添加position: relative;
并在#arrow-inner
添加position: absolute; top:-16px; left:-15px;
position: absolute; top:-16px; left:-15px;
通常这是可行的。 见我的http://jsfiddle.net/DoubleYo/cAGWa/
具有CSS属性的position
#arrow {
position: relative;
background: // the larger image
width: // width of larger image
height: // height of larger image
}
#arrow-inner {
position: absolute;
background: // the smaller image
width: // the width of smaller image
height: // the height of smaller image
top: // the offset from the top of the larger image e.g. 2px
left: // the offset from the left of the larger image e.g. 5px
}
您可以使用以下样式
#arrow {
position: relative;
background: url('url of the bigger image');
}
#arrow-inner {
position: absolute;
background: url('url of the smaller image');
top: ;//dimmension in px for the vertical top displacement
left: ;//dimmension in px for the vertical left displacement
z-index:; dimmension in px for the z displacement though not neccessary
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.