Often you are asked to create a button like this:
Solution 1: The entire button is an image, with text on it. This solution increases your number of request; relies on CDN, effects accessibility.
Solution 2: Use CSS3 border-radius for the rounded corner. But what about the triangle. You don’t want to a triangle image because of the same reason in Solution 1. Let’s take the CSS challenge, shall we?
If you are familiar with box model, you can have thick border but content size is 0 by 0. What if you just have one side of the border with 0 by 0 content, what you got?
border-color: #FF0000 transparent transparent transparent;
Change border-color, you can get all 4 triangles pointing to different directions. Play with border width you can get thin or fat triangles too.
You end up a piece of markup for merely decoration purpose.
Solution 3: The most semantic markup with simple CSS is to use Unicode triangle characters. You can find there hex code here. However you don’t want to put these decoration character in markup. Hint…hint…CSS content property to the rescue.
content: ' \25B6';
You got it! Change the character, you gets all 4 directions. You may change font color to control the overall shape, but you can’t make it thin or fat. For that, back to solution 2.