Draw a triangle using CSS?

Question

I know that you can draw using the canvas element, I just wanted to know if it is possible to draw a triangle next to the link without using the canvas element? I just want a small <16px down arrow.

Answer 1

No.

The closest you can get is to use the ASCII key ↓, to be exact.

He creates an arrow similar to this & darr;

Of course, the background image will do the trick, but that is pretty obvious, isn't it? :)

Answer 2

css. JSFiddle. ( Chrome!)

CSS :

.triangle{
display: block;
border-bottom: 16px solid transparent;
border-left: 16px solid red;
overflow: hidden;
position: absolute;
}

, , . , :

.triangle{
display: block;
border: 16px solid transparent;
border-top: 16px solid red;
overflow: hidden;
position: absolute;
}

: IE, FF Chrome.

Answer 3

U + 25BC: . : ▼

CSS :

a:before {
    content: "▼";
}

, background-image. , , -, IE 6/7. :

a {
    background-image: url("arrow.gif");
    padding-left: 16px;
}

Answer 4

. ASCII, &#darr;, CSS:

<span id = "down-arrow">&#darr;</span>

Answer 5

CSS:

<div style="border: 11px solid transparent; border-right-color: rgba(0, 0, 0, 0.25);"></div>

If you need to change direction, just replace border-right-color with border-direction-color . And, perhaps, you use the properties position: absolute;and margin-topand margin-leftto set the position.