You've probably seen arrows on a website directing you to keep scrolling down the page after you finish a section. These are simple, super effective styling elements that help out with the flow of your content.
If you've been trying to figure out how to make those elements or you're looking for a way to draw people's attention to other information, follow along with this short tutorial.
It'll take you maybe 5 - 10 minutes to figure out how this works and what it's good for so you aren't wasting any of your time.
You'll only need HTML and CSS to make this element.
The HTML is simple. All you need is a div element with a class name. Here's what that looks like:
<div class="bottom-arrow"></div>
That's it for the HTML. Now it's time to look at the CSS which is where you have to get clever.
The style for the .bottom-arrow class is easy enough to write.
.bottom-arrow {
border-bottom: 5px solid #6A0136;
}
The way you make the arrow is where it gets interesting. First you'll start by using the pseudo-class selector, :after.
Inside of the selector, you need to set a value for the content property. An empty string is fine if you don't have any text you want to show.
Then you have to set a position value in order for the arrow to stay on that bottom border you set for the div. Without this value being set, your arrow will not show up where you think it will. Go ahead and see for yourself.
Next you'll want to use the margin property to center the arrow on the div. You could also use the margin to give the arrow an offset from the center if that would work better for your design.
After that, go ahead and set the height and width properties to zero. The reason you want to do this is because if you give the arrow a width, it won't look like an arrow unless you do some crazy CSS magic. The height doesn't necessarily have to be set to zero as long as the width is, but doing so will help you to avoid those nasty layout surprises later.
The last thing you have to do is set some border properties. You'll need to set the border-top property. This is how you will set the height and color of your arrow.
Next you need to set the border-left and border-right properties. These control the width of your arrow. An interesting tidbit here is that you don't give the border-left and border-right properties a color. They need to be set to transparent because they are responsible for creating the arrow.
Think of the border-left and border-right properties as cutting a triangle out of a box and that's exactly what's happening.
Here's the CSS code that we've been talking about:
.bottom-arrow:after {
content:'';
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
width: 0;
height: 0;
border-top: 25px solid #6A0136;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
It's not so bad. You just have to know how CSS works and how it can be manipulated. There are probably 100 other ways of doing this same thing, but this is the way I figured out how to do it.
I hope this quick run through helps!
Hey! You should follow me on Twitter because reasons: https://twitter.com/FlippedCoding
Top comments (6)
Nice article!
I made this "pointer" mixin years back and I've used it on a ton of projects since. You can override defaults and all sorts of things. I'd be interested to see what you think of it. :)
codepen.io/mstenquist/pen/InAop
This is pretty sweet! The code is so clean and I see how you could use it on just about any element! 👏🏾👏🏾
Great write-up for a super useful design tip!
If anyone wants to play with this in codepen without setting it up, I put the code here
Thank you for the pen, 12vanblart~
lol 😂 I should've refreshed the page first so I could've played around with your CodePen instead of trying it in devtools as I did in the other post 😛
I created the codepen to look at the same thing as in your other comment :D
I've had trouble with where the diagonal line came from 🤔.
It turns out my understanding of how borders overlap was wrong 😅
I've always thought that top border would show over left & right borders instead of forming diagonal lines as shown below.
Understanding 👆 helped the article much better 🙂