簡體   English   中英

如何在CSS中制作兩個箭頭

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

示例: http//jsfiddle.net/felixsigl/hn9sc/

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

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM