DEV Community

Cover image for How To Put Arrows at the Bottom of a Div

How To Put Arrows at the Bottom of a Div

Milecia on December 27, 2018

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 effectiv...
Collapse
 
mstenquist profile image
Mark Stenquist

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

Collapse
 
flippedcoding profile image
Milecia

This is pretty sweet! The code is so clean and I see how you could use it on just about any element! πŸ‘πŸΎπŸ‘πŸΎ

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

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

Collapse
 
dance2die profile image
Sung M. Kim

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 πŸ˜›

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

I created the codepen to look at the same thing as in your other comment :D

Collapse
 
dance2die profile image
Sung M. Kim • Edited

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.

demo

Understanding πŸ‘† helped the article much better πŸ™‚