create arrow using css - html

Question

I don't have much experience in css. But I want to design a diagram in html. I need to design slimmer arrow (link) using css.
I thought of using image but I need arrows in different colors. Is there any possibilities by adding transparent arrow image and adding colour dynamically if yes provide sample code or any other suggestions also welcome. Kindly suggest me.

Answer 1

Try to use Font awsome LINK
HTML:
<i class="fa fa-arrow-right"></i> fa-arrow-right

Answer 2

Yes, there are several ways of doing this.
1. With an image
First of all, in order to do what you've suggested, you can indeed use an image - but instead of coloring the arrow, you would be coloring behind a cut-out of an arrow.
To do this, create the image of your arrow in a file format that supports transparency (PNG would be my recommendation). For example, a white square with the shape of an arrow 'cut out' of it, so that the arrow is entirely transparent (surrounded by white). It could look something like this in Photoshop;
Now, with your transparent PNG, insert the image into your code and surround it with a container - such as a DIV. You can then style the DIV (not the arrow), but the arrow will appear to change color.
Your HTML and CSS might look something like this;
<div style="background-color: red; display: inline-block; font-size: 0;">
<img src="arrow.png";>
</div>
background-color: ---; will determine the color of your arrow (you can also use hex values for better specificity - for example background-color: #CB0022;).
display: inline-block; is one possible way to keep your wrapping DIV under control. Without it, your background color will stretch to the full width of its parent container (possibly the entire page) - breaking the effect you're trying to create. Alternatively, you could also float the DIV, but this will complicate matters if you want the arrow to appear in the middle of text.
font-size: 0; is one possible solution to the common issue of extra space appearing around the image (and again, revealing unwanted background color where it shouldn't be).
The main downsides of using this technique are that manipulating images may be complicated depending on your precise layout/implementation. Also, the above example is suitable only for a page that has a white background. If you have a variety of background colors (or a more detailed/complex background, such as a photograph or pattern), this may be a very difficult solution to work with, because your arrow's 'box' is unlikely to match what's behind it.
2. With Unicode / HTML characters
Rather than using an image, you can use unicode characters to write out arrows as actual text. There are lots of these codes - and an example of them can be found here: HTML Arrow Codes
For example, your code might look like this;
<p style="font-size: 2em;">Why don't you look over there? → →
... or down there? ↙</p>
This would look something like this in a browser;
And then you could further style the arrows with <span> tags in order to change their size or color independently, like this;
<p style="font-size: 1.5em;">Why don't you look over there?
<span style="font-size: 4em; color: blue;">→</span>
<span style="font-size: 2.5em; color: darkgreen;">→</span>
... or down there? <span style="font-weight: bold; color: #CC0000;">↙</span></p>
Which would look something like this;
The main advantages here are that you will have no issues with matching against background color, you can more easily change the appearance of the arrow with code (CSS).
The downside is that using obscure characters and fonts can, in some cases, display inconsistently from device to device for a multitude of reasons I shan't burden you with right now. Suffice it to say, if you prefer this solution, be sure to test your results on as many different machines as you feel is appropriate.
Hope that's of use.