courtesy:
http://hedgerwow.appspot.com/demo/arrows
The old spice come back with a new flavor.
I was reading an interesting post(in chinese) about how to enable the transparent border in IE, and I thought it's worthy to spread this technique to more people. So below is my take.
This trick does not require using filter: chroma(color=pink) for IE.
The quick brown fox jumps over the lazy dog
http://hedgerwow.appspot.com/demo/arrows
The old spice come back with a new flavor.
I was reading an interesting post(in chinese) about how to enable the transparent border in IE, and I thought it's worthy to spread this technique to more people. So below is my take.
This trick does not require using filter: chroma(color=pink) for IE.
Examples
The quick brown fox jumps over the lazy dogThe quick brown fox jumps over the lazy dog
HTML
<span class="arrow-n"></span> <span class="arrow-e"></span> <span class="arrow-s"></span> <span class="arrow-w"></span>CSS
.arrow-n, .arrow-e, .arrow-s, .arrow-w { /* * In Internet Explorer, The"border-style: dashed" will never be * rendered unless "(width * 5) >= border-width" is true. * Since "width" is set to "0", the "dashed-border" remains * invisible to the user, which renders the border just like how * "border-color: transparent" renders. */ border-style: dashed; border-color: transparent; border-width: 0.53em; display: -moz-inline-box; display: inline-block; /* Use font-size to control the size of the arrow. */ font-size: 100px; height: 0; line-height: 0; position: relative; vertical-align: middle; width: 0; } .arrow-n { border-bottom-width: 1em; border-bottom-style: solid; border-bottom-color: #666; bottom: 0.25em; } .arrow-e { border-left-width: 1em; border-left-style: solid; border-left-color: #666; left: 0.25em; } .arrow-s { border-top-width: 1em; border-top-style: solid; border-top-color: #666; top: 0.25em; } .arrow-w { border-right-width: 1em; border-right-style: solid; border-right-color: #666; right: 0.25em; }
No comments:
Post a Comment