So to create the triangles and arrow heads with CSS3, I need to discuss some terms (properties) related to CSS3. They are:
- Pseudo Elements
The borders have the hack to create these arrows. When borders are given of more width then these are rendered as having edge where two borders meet i.e. point where border-left and border-top intersect; the top-left corner will have an edge. To see it practically for an element set the border as 10px solid red for border-top and 10px solid green for border-left. Then you can see the edge properly.
Now consider a case when the element is of only zero or one pixel then it would look something like this:
So you can see each side is looking like a triangle; and hence by this way triangles and arrow heads can be created. Suppose if we want to create a arrow head pointing in up direction; then we can use the `green` section of the above image. And remaining should not be visible. To do that we will have to follow these steps:
- Make the opposite side border as `0px`. As we want the `border-bottom`; we will set the `border-top` as `0px`.
- Make the adjacent sides invisible. This can be done by setting the `color` as `transparent`. So here we will set the `border-left-color` and `border-right-color` as `transparent`.
- Now include this div to an additional element which will give it a look of arrow head
You can see the above steps in following example:
So Similarly; you can create arrow head of grey color (`#ccc`) with following code:
And it will look like this:
Now lets come to some advanced topic; Utilising Pseudo elements for arrow heads. To use the Pseudo elements; you will need to have a container element and inside that you can have your content and the arrow head; where arrow head is positioned as `absolute`. Following snippet can hep you to see the use of pseudo element for upper direction arrow:
And this will look like this:
So now you can play with this hack and make more interactive and beautiful UIs. Happy Coding!!!