简体   繁体   English

如何在CSS中制作两个箭头

[英]How do I make two arrows in css

I want to create an arrow using CSS only 我只想使用CSS创建箭头

Example you can see http://jsfiddle.net/b9Yfc/ 示例您可以看到http://jsfiddle.net/b9Yfc/

On

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

I want arrow-inner will be place into arrow and result should be like 我希望将arrow-inner放置在arrow ,结果应该像

在此处输入图片说明

How to achieve my goal? 如何实现我的目标?

Play with the position properties 发挥position属性

On #arrow add position: relative; #arrow添加position: relative;

And on #arrow-inner add position: absolute; top:-16px; left:-15px; 并在#arrow-inner添加position: absolute; top:-16px; left:-15px; position: absolute; top:-16px; left:-15px;

And normaly it's works. 通常这是可行的。 See my http://jsfiddle.net/DoubleYo/cAGWa/ 见我的http://jsfiddle.net/DoubleYo/cAGWa/

With css property position 具有CSS属性的position

Example: http://jsfiddle.net/felixsigl/hn9sc/ 示例: 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
}

you can use the following for your styling 您可以使用以下样式

#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