Create Simple CSS Arrows


There are a lot of articles and generators out there on how to create CSS bubbles. Most of them are great, for 99% of the time. When I was creating arrows for one of my sites, WP Improve, I ran into a lot of issues. I was using the Advanced Custom Fields WordPress plugin to allow for user defined colors for each section of my website, the arrow at the end of the section would then take on the same color as the section itself. Every tutorial & generator I used either didn’t display the right color, or the arrow would not show up at all. It was time for me to come up with my own solution.

My HTML looked like this:

I am using inline CSS for colors because each section is defined dynamically in WordPress, so the easiest way to do this is to add it inline.

Next is the CSS for the arrows itself. This one of the finer points of CSS, we can take advantage of inheretence to make the color of the arrow the same color as the parent div, without having to code custom colors into each arrow:

The parent div needs to be relatively positioned.

For the :after pseudo selector we do the following things:

  1. Absolutely Position The Element
  2. Create a 20px square
  3. Rotate it 45 degrees to create a diamond
  4. Position it 10px below the div (to get the “arrow” effect)
  5. Center it by making it left 50% then adding a -10px margin to compensate for half the width of the element.
  6. Adding a z-index to make sure the arrow is always on top

Here is an example of this working in action:

See the Pen JGELXW by Zach Russell (@protechig) on CodePen.

How do you prefer to make your CSS arrows?

2016 Goals

2016 Goals

I’m excited for what’s to come for me in 2016. I didn’t reach all my goals last year mainly due to health reasons. I’m determined not to let this affect me in the upcoming year.

I’m going to break this down into three different sections:

  1. Business
  2. Professional Development
  3. Personal

Business Goals

I want this year to be one of the most memorable years for me. I have a lot of promising business ideas. If I can consistently dedicate time towards building these ideas to maturity, I can make a lot of money.

The first thing I want to do is bring my WordPress maintainence service, WP Improve, into production. The good news is that this site is already functional. In order for me to start getting customers, I need to start writing content and marketing to my target audience. To begin, I need to start writing sales content. I want to target web professionals with the service, I can keep it more technical. Next, I want to start writing blog posts targeted towards web professionals. To do so,  i’m going to write tutorials specializing in popular WordPress niches like Woocommerce, Gravity Forms, and the Genesis Framework. I also want to experiment with Twitter ads to further attract customers.

Next, is a relatively new idea that I have; a web crawling/scraping service that crawls fully rendered pages (i.e. JavaScript and AJAX). This service would fill a need that the SEO industry desperately needs.  I have the knowledge and infastructure ideas to implement this in a way that is completely scalable.

Lastl, is the more obvious goal: growing my consultancy, ProTech. I have let my online presence with this company remain stagnant for the past year or so. This has happened becasue I have been content with the volume of work/leads I have sustained in 2015. Not this year. In 2016 I would love to double my revenues, and up the bar in both the quantity of leads I receive, and the quality of my deliverables. Ideally, I want to take on larger, more complex projects that really allow me to use my development and marketing skills.

To start, I need to launch my redesigned website. It’s been in development since October of 2014, so it’s more than time to finish it. Since it’s about 85% completed, I would like to have it live by mid-January. Next, I want to start writing more blog posts for ProTech. I think if I focus on my specialties (WordPress & Techical SEO), I can draw decent amount of traffic. Lastly, I want to start networking more. This was something that suffered greatly in 2015 due to my back injuries – I couldn’t go to many networking events. I would like to attend at least one networking event per week and speak at least six times.

Professional Development

In 2016, I want to continue my education to become a much better programmer. Currently, I’m comfortable where I am building WordPress websites. If I continue being comfortable, I will end up falling behind of the curve and my career will suffer. I want to become familiar with some more technologies which will allow me to keep a competetive edge.

The first thing that I want to do is become more proficient with Python. I  have a solid grasp of the language to land an entry-level position , but I want to become an expert in Python. To start, i’ll finish my Professional Python book. Then, I want to become familiar with Flask, and building an app with Django.

Next, I want to become more proficient with JavaScript. I want to learn some of the more popular libraries, like NodeJS, React and Polymer. I also want to do some more visualizations using D3.

I would then like to learn more Ruby.  I don’t expect to become an expert in Ruby, but I would love to get a solid grasp of the language. I would then like a practical understanding of Ruby on Rails and Sinatra.

Lastly, I would like to be more of an active participant in the WordPress community. I have been developing almost exclusively on WordPress for almost 5 years now, and I would like to become a core contributor. My goal here is to become a named contributor for the 4.6, which would be sometime in June.

Personal Goals

My big personal goal, has been one that i’ve failed at for several years (as i’m sure most people do), I want to lose weight. For the past several years, I have consistently gained wait, and it is time to seriously change this. My weight issues are mostly related to unhealthy food choices I make, eating a lot of fried, high calorie foods, and not a lot of vegetables. This is mostly because of convenience, I like eating healthy, but ordering takeout is easy. I think I can lose weight by cooking at home more, and my goal is to lose 75-100 lbs or 1.5 to 2lbs a week.

What do you think about my goals for 2016? Feel free to comment below.