Draw a triangle with CSS?
I know you can draw with a canvas element, I just wanted to know if it was possible to draw a triangle next to a link without using a canvas element? I just want a small < 16px down arr开发者_运维问答ow.
Here is my take on drawing a triangle in css. You can view it on JSFiddle. Have not done any browser testing (works in Chrome!)
The CSS is pretty simple:
.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}
If you want it pointing in a different direction, just alter the borders. For example, the following will point the triangle downward:
.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}
Edit: Works in latest IE, FF and Chrome.
Nope.
The closest you could get is by using an ASCII key, ↓
to be precise.
It produces an arrow like this ↓
Of course a background-image will do the trick, but that's quite obvious, innit? :)
U+25BC: Black Down-Pointing Triangle exists in Unicode. Here it is: ▼
You could use this CSS to apply it:
a:before {
content: "▼";
}
It's probably better to use a background-image
though. That way, you would not depend on the existence of such special characters in the font the web browser uses, and it would show up in IE 6/7. For example:
a {
background-image: url("arrow.gif");
padding-left: 16px;
}
No. Just use a special ASCII character, &#darr;
, no CSS required:
<span id = "down-arrow">&#darr;</span>
Here's my simple drawing for the triangle using CSS:
<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>
If you need to change the direction, just replace border-right-color with border-direction-color.
And maybe you use position: absolute;
and margin-top
and margin-left
properties to set the position.
精彩评论