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

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

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 a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

Vertical Scroll Snapping In Elementor with CSS

In todays tutorial we are going to through how you can add vertical scroll snapping to your Elementor site with just CSS. Here is a preview how it should function. For this to work you don’t need any kind of…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

2 Comments

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?