5/5

How to Create A CSS Arrow

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. 😀

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn...

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping...

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile...

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this...

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.