About design and nearby

Centered CSS Triangle (Responsive Solution)

Posted: June 24th, 2014 | Author: | Filed under: Tips and Tricks | Tags: , , , | No Comments »

Create a triangle shape with CSS is pretty easy. You can do that with pseudo-elements :before and :after:

The HTML:

  1. <a id="my-triangle" href="#"></a>

The CSS:

  1. #my-triangle:after {
  2. content: '';
  3. position: absolute;
  4. width: 0;
  5. height: 0;
  6. border-left: 17px solid transparent;
  7. border-right: 17px solid transparent;
  8. border-top: 18px solid #ff7532; /*arrow color*/
  9. }

This way you get a smart ‘down’ triangle: css triangle

And what if you need to center this triangle (in the Age of Responsive Web Design) for any screen size? Two lines of css could help you, here’s how you can do so:

  1. #my-triangle:after {
  2. left: 50%;
  3. margin-left:9px; /*it's a half of the 'border-top' property value*/
  4. }


Finally, your CSS is

  1. #my-triangle:after {
  2. content: '';
  3. position: absolute;
  4. width: 0;
  5. height: 0;
  6. border-left: 17px solid transparent;
  7. border-right: 17px solid transparent;
  8. border-top: 18px solid #ff7532; /*arrow color*/
  9. left: 50%;
  10. margin-left:9px; /*it's a half of the 'border-top' property value*/
  11. }

Standalone example: view the example >>

Share Button

Check Related Posts:


Leave a Reply


  • 2 × nine =

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now