Home » create arrow using css

create arrow using css


Try to use Font awsome LINK


<i class="fa fa-arrow-right"></i> fa-arrow-right

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;

Transparent arrow

  • 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="https://stackoverflow.com/questions/24140550/arrow.png";>

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? &#8594; &#8594;
... or down there? &#8601;</p>

This would look something like this in a browser;

Arrows as text

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;">&#8594;</span>
<span style="font-size: 2.5em; color: darkgreen;">&#8594;</span>
... or down there? <span style="font-weight: bold; color: #CC0000;">&#8601;</span></p>

Which would look something like this;

enter image description here

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.

Related Solutions

What are the available Signals in Java

Eventually I brute forced the single to 5 character length signals and got these: BREAK (21) SEGV (11) ILL (4) FPE (8) TERM (15) ABRT (22) INT (2) The code: Set<String> signals = new HashSet<>(); String currentSignalStr; for (char i = 'A'; i <=...

Understanding unique keys for array children in React.js

You should add a key to each child as well as each element inside children. This way React can handle the minimal DOM change. In your code, each <TableRowItem key={item.id} data={item} columns={columnNames}/> is trying to render some children inside them...

most efficient AABB vs Ray collision algorithms

Andrew Woo, who along with John Amanatides developed the raymarching algorithm (DDA) used ubiquitously in raytracers, wrote "Fast Ray-Box Intersection" (alternative source here) which was published in Graphics Gems, 1990, pp. 395-396. Rather than being built...

What is the difference between #!/bin/sh and #!/bin/bash?

bash and sh are two different shells. Basically bash is sh, with more features and better syntax. Most commands work the same, but they are different. Having said that, you should realize /bin/sh on most systems will be a symbolic link and will not invoke sh....

How to pass password to mysql command line

The mysql client utility can take a password on the command line with either the -p or --password= options. If you use -p, there must not be any blank space after the option letter: $ mysql -pmypassword I prefer the long options in scripts as they are...

how to leave a gap in select list from left [closed]

Maybe you were after something like: <select style="padding: 0 0 0 10px"> <option>Male</option> <option>female</option> <option>other</option> </select> jsFiddle example here. Is that what you wanted? Edit: After...

How to use multiple condition in one foreach loop?

Use two loops: foreach ($products as $product) { foreach ($categories as $category) { // using $product and $category } } I had the same question today as the OP. I figured I can split up the problem by first merging the two arrays and then performing the...

Why do Primitive Data Types have a Fixed Size?

As low-level programming languages, the designs of C and C++ closely follow what common hardware is capable of. The primitive building blocks (fundamental types) correspond to entities that common CPUs natively support. CPUs typically can handle bytes and words...

how do i count the words in a string list

Shouldn't it be string[] words = s.Split(' '); Even if we say your word is s.Split(' '); then it should be string[] words = word not string[]=word And to count how much words are in that array just do int howManyWords = words.Length; Also if you want to go...

Data from text file to dataframe

Here you go! It's really fast. For a file with ~11 million lines (made by copying and pasting your sample file over and over again), it took about 22 seconds on my machine, and produced a dataframe with 2.2 million rows. Note: I wasn't sure quite how to handle...

Unexpected output when creating a List of Lists in Java

You are adding all the integers to the same inner list (the one that you create at the start of your method with the statement List<Integer> l1 = new ArrayList<Integer>();). You should create a new List before adding elements to it: for(int i=1;...

how to calculation cost time [closed]

I think I understand what you're asking. You just want to have a new dataframe that calculates the time difference between the three different entries for each unique order id? So, I start by creating the dataframe: data = [...

how to disable button on change using jquery

you can do this as am assuming a image and am checking the resolutions and then i disable or enable the button as per requirements and also am clearing selected image so user can't upload the wrong format . <script> var _URL = window.URL ||...

Detect and uninstall antivirus

You could try the following, from https://community.spiceworks.com/scripts/show/3161-detect-and-remove-software-powershell: ################################################ # Powershell Detect and Remove software script # # # # V1.0 - Gav #...

return statement in c ??? why this function always returning 20?

You have a problem in your code. Change scanf("%d",arr[i]); To scanf("%d",&arr[i]); This is done because scanf expects an argument of type int* but you provide argument arr[i] which is of type int. Also add a check that ends the program if user inputs a...

How to add Bootstrap? [closed]

By adding the CDN <html> <head> <title>Cube</title> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet"...