• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

  • Try Premium
  • Log in

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.

Click here to access free tutorials


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

Click here to access free tutorials


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

  • Authority Pro Landing Page Template With Hero Section & Down Arrow
  • Add Down Triangle Like Arrow After Front Page 1 Widget

Reader Interactions

Comments

  1. jay says

    August 27, 2014 at 12:20 am

    I added the css but how do i call it?

    Log in to Reply
  2. jay says

    August 27, 2014 at 12:20 am

    Brad more direction please for a newbie like me 🙂

    Log in to Reply
  3. Logan says

    August 9, 2014 at 12:36 pm

    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!

    Log in to Reply
    • Brad Dalton says

      August 9, 2014 at 12:41 pm

      Hi Logan

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

      Log in to Reply
  4. Pavle says

    June 20, 2014 at 7:12 am

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

    Log in to Reply
    • Brad Dalton says

      June 26, 2014 at 7:32 am

      No worries Pavle

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.