2 Ways To Create a Down Triangle Like Arrow After Any Div Class

I was asked a question recently on the forums which i think you may like about how to add a arrow after a home page section like this:

arrow after section using image

There’s at least 2 ways you can add the arrow or down triangle as some call it:

  1. Pure CSS
  2. CSS & image

1. Pure CSS Down Triangle

Simply add this CSS code to the end of your child theme style sheet and modify the color to match your theme.


Note: Both snippets include a value for the bottom property which you may need to modify depending on which theme and class you use to add the down triangle to. You’ll also need to change class from.div to the div class you want to add your triangle after in your theme.

2. Triangle Image & CSS


And here’s the image you can open using a graphic design editor and change the background color to match your themes styling.

triangle image

Simply upload the image to your child themes images folder and make sure the path, file name and extension match whats in the CSS code.

down triangle

Related Tutorials


Comments

6 responses to “2 Ways To Create a Down Triangle Like Arrow After Any Div Class”

  1. I added the css but how do i call it?

  2. Brad more direction please for a newbie like me 🙂

  3. greeting. this tuts was so perfect. it was pretty challenging to even FIND the term ‘down triangle’ for a newbie like me.

    for option one, why these:
    left: 45%;
    margin-left: -21px;

    i would have guessed ‘left: 50%’ but not because I know anything, just 50 sounds centered.

    many thanks!

    1. Brad Dalton Avatar
      Brad Dalton

      Hi Logan

      You can use 50% but you also need to take into account the width of the triangle at its widest.

  4. Great tutorial Brad!
    Exactly what I was looking for.
    Thanks so much for helping us.

    1. Brad Dalton Avatar
      Brad Dalton

      No worries Pavle

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.