Greetings All,

For this brief tutorial I will show you how to create a css arrow that can be attached to a widget, column or div. The process shouldn’t be overly confusing but if you have any issues please feel free to post them in the comments.

Here is an example of what you can hope to achieve if implemented correctly.

Let’s Begin

First thing I did was add a section with 3 columns.

Next I added a text widget and gave it some padding (50px) all around. I also gave the column a margin of (20px) to kind of add some place so the css arrow is not outside the column.

And that is pretty much it for styling let’s get into the CSS.

The CSS

Depending on where you want your arrow to be you will need to apply different CSS for each position.

Here are the classes we will be using: top_arrow, bottom_arrow, left_arrow, right_arrow.

Pick a class and add it to your text widget class area. I choose to start with the top_arrow.

Now it is time to add your CSS.

You have a couple options when it comes to where you apply your CSS. You can either choose your style sheet with in your child theme, customizer or if you have pro in the advanced tab > CSS. Where you add it is completely up to you.

For this example I will simply add it to my customizer.

Add this css:

.top_arrow:after, .top_arrow:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.top_arrow:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: grey;
	border-width: 20px;
	margin-left: -20px;
}
.top_arrow:before {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: grey;
	border-width: 20px;
	margin-left: -20px;
}

You should now see a grey arrow. Congratulations.

You can change the color by simply changing the border-bottom-color and also the size by adjusting the border-width and margin-left.

I hope this was useful and can get all the css for all four sides by clicking the button below. 😀