My 3rd vid: Drawing Arrows Using Pure CSS (Cross Browser Styles)

In my previous Readify customer gig, I was responsible for creating and maintaining a collection of UI widgets (HTML5 / CSS3 / JavaScript) that were used by several teams as part of a large banking project. There were definitely a few tricks that I applied so many times back then, and here’s one…

Drawing arrows. It was a very common thing. We had several components with dropdown menus using arrows at the end to communicate to the user they are expandable, and several links with arrows before them, etc.

Interestingly, I still got a question from one of the developers who had problem creating one of these after I left the client. Although there are some good articles. I thought a video tutorial could be helpful!

The Video

How to draw/create arrows by using CSS only

Well, as this video publishing experiment goes, I think I’m learning a few things, and still observing that there are some other things I need to fix in the next vid, so, as usual, your feedback, what you liked (and what you didn’t like) is always appreciated.


You’ve got the video, please watch it and tell me what you think (either here, in video comments, or on Twitter). Also, let me know what you think about the direction of the video topics so far, more importantly, let me know the topics you would like me to cover in the next video.

Thanks a lot!

Share With Friends:

How did I learn that?

As a bonus for coming here, I'm giving away a free newsletter for web developers that you can sign up for from here.

It's not an anything-and-everything link list. It's thoughtfully collected picks of articles and tools, that focus on Angular 2+, ASP.NET (4.x/MVC5 and Core), and other fullstack developer goodies.

Take it for a test ride, and you may unsubscribe any time.

You might also want to support me by checking these out [Thanks]: