我如何在CSS

Question

兩個箭頭我想用CSS只

實例創建一個箭頭就可以看到http://jsfiddle.net/b9Yfc/

在

<div id="arrow"><div id="arrow-inner"></div></div> 

我想arrow-inner會的地方變成arrow和結果應該像

如何實現我的目標？

Answer 1

播放與position性質

在#arrow添加position: relative;

而且在#arrow-inner添加position: absolute; top:-16px; left:-15px;

而且normaly它的作品。見我http://jsfiddle.net/DoubleYo/cAGWa/

Answer 2

#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 
} 

Answer 3

的CSS屬性position

例子： http://jsfiddle.net/felixsigl/hn9sc/

Answer 4

，你可以使用你的造型

#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 
}