triforce

Another CSS Triangle Article?

There are plenty of places showcasing how to make CSS triangles, but most of the time only up, right, down, and left pointing triangles are covered.

Examples of diagonal pointing triangles can be found by digging enough, but I don’t want to dig. (As it turns out, the results are a little better when searching “CSS right angled triangle“) This post exists as a quick resource reference that covers them specifically.

Methods

There are 2 ways to achieve this. The short of it is: Remove corresponding borders or color 2 of the borders.

To create a triangle pointing southeast, set border-left to none or color the right and bottom borders.

Below is a CodePen demonstrating both techniques. For the basics of CSS triangles, see the resources below.

Check out this Pen!

Resources

Pure CSS Triangles Explained – AppendTo
CSS Triangle – CSS Tricks
CSS Triangle Generator (Handy)

wp-logo

I often receive designs for small companies that have a blog/news header preceding the post list; just like on WordPress.org‘s News section.

WordPress's blog tile: "WordPress News

WordPress’s blog tile: “WordPress News”

This is pretty simple to implement statically. Just wrap the title from the comp in some HTML and put it in the home.php or index.php file. This works but it’s not ideal because it can’t be changed without updating theme files. Continue reading →

I have a problem. It happens when I can’t decide immediately what key-command I am supposed to do so next my hands just guess which muscle memory to execute. Often that is ⌘ + W, because I close tabs, a lot. It also happens when I think the focus is on Chrome, but really it’s over on Canary so I close the web-app I was working on.

A lot of times accidentally closing tabs isn’t a big deal ⌘ + Shift + T will open it right back up. But what if you were testing a certain state on that application? You have to reopen the tab and navigate all the way back to where you were. What if you were attending an online conference, DJ-ing on plug.dj, or listening to a video? What if you miss the W key and smack the Q key and close Chrome all together? It’s not a huge problem, but it is an annoying one. So I made a bookmarklet to help prevent it. Continue reading →