Hey Guys, it’s been a little while…

I won’t bore you with what I’ve been up to, but long story short life has been a little crazy over the last year.  I’ve wrote some apps at work and have learned a TON.  I’m also dropping the TL;DR format because I just don’t like it anymore.  Now for the main event….

The traditional way of making a CSS triangle:

This method uses what I would call a CSS hack to make the borders of a pseudo-element look like a triangle.  You can find examples of how that works all over the web.  In fact, this page is a really good choice if you have to do it this way.

div:after{
  content:"";
  position:absolute;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-right:10px solid #f00;
  top:0;
  right:0;
}

However, dynamically styling a pseudo-element can be very problematic.  This is why I spent 3 days trying to come up with a solution to a problem I was having.  Here it is:

Looks pretty much the same, right?  Good, that’s what I was going for.  However, there are a couple of distinct advantages of the second method. I’m not going to say I came up with it because let’s face it, someone somewhere has probably already figured this out.  That’s fine, but I couldn’t find it when I needed it.  I did find some pretty cool options here that involve SVGs and gradients, but they weren’t really suitable for my needs and browser support is iffy at best for some of them.

This is what this method looks like:

div::after{
  content:"";
  position:absolute;
  width:15px;
  height:15px;
  right:0px;
  top:50%;
  transform: translate(50%, -50%) rotate(45deg);
  background:#F00;
  
}

Why is this better?

Well, I guess “better” is a subjective term.  There are a few problems with this idea.  You may have to play around with some z-indexes and slightly unorthodox positioning methods to get it to work exactly right, but at least in my case, that was more than worth it.

The way it works is pretty simple.  If you cut a square diagonally in half, you get two perfect triangles.

By rotating the square, you get a diamond shape.

Lastly, using a parent element to hide half of the diamond with overflow:hidden, you achieve a triangle.

So why did I waste 3 days looking for this?

I’m working on a JS and CSS framework that led me to the need to create a custom tooltip. I know it’s been done a thousand times before, but I just wanted to make something.  The problem was that I couldn’t dynamically change the color of the triangle to match whatever color I wanted the tooltip to be.

This was my result:

As you can see, that doesn’t look good.  The triangle needs to be the same color as the tooltip itself.  My first thought was to just copy the background color from the tooltip element and then insert it into the border-color property using JS.  This led down a long rabbit-hole of custom DOM extensions and some dark depths of stackoverflow.

This solution works because I can use the inherit property on the pseudo-element to grab the background property from the tooltip element.  From there, it becomes trivial to style the tooltip element dynamically with JS or even just by changing the CSS class of the parent element.

In Conclusion…

Like I said before, this may not work for EVERY situation and there are some drawbacks, but if you find yourself in my shoes and need this or come up with some other ways to use this, please let me know in the comments!