[英]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.