Triangle

Often you are asked to create a button like this:

Button with Triangle

Button with Triangle

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?

Simple triangle

Simple triangle

HTML:
<div class="triangle"></div>

CSS:
.triangle {
border-color: #FF0000 transparent transparent transparent;
border-width: 10px;
border-style: solid;
width: 0;
height: 0;
}

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.

HTML:
<button class="triangle-right">Search</button>

CSS:

button {
border: none;
border-radius: 10px;
color: #FFF;
background-color:#f00;
}
.triangle-right:after {
content: ' \25B6';
font-size: 84.6%;
}

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.

Advertisements
This entry was posted in Tips. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s