I want to create an arrow using CSS only
Example you can see 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
How to achieve my goal?
Play with the position
properties
On #arrow
add position: relative;
And on #arrow-inner
add position: absolute; top:-16px; left:-15px;
position: absolute; top:-16px; left:-15px;
And normaly it's works. See my http://jsfiddle.net/DoubleYo/cAGWa/
With css property position
Example: 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
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.