如何在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;

正常而言，这是有效的。查看我的http://jsfiddle.net/DoubleYo/cAGWa/

Answer 2

使用css属性position

实施例： http://jsfiddle.net/felixsigl/hn9sc/

Answer 3

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