Pure CSS Triangles, Tooltip, And Link

Creating things with pure css can be a fun and exploratory process. Creating CSS triangles falls into that group as well. Even though that support for pure CSS triangles goes back to IE7 (yes really), it’s only with the introduction of CSS3 that we can really let it shine. In this tutorial I will give a basic overview of how to create pure CSS triangles as well as how to create a complex CSS3 button that involves triangles.

First thing to understand when making triangles is how browsers treat CSS borders. Now it may seem that CSS borders has nothing to do with making triangles but it is actually the backbone of it.

When a browser renders a border it needs to treat the corners in a certain way that each side has equal proportions. To do this it splits the corner from the outside corner to the inside corner. As you can see in this illustration the different colors make it really easy to see the separation. Now, what if you have an element that doesn’t have a height or a width? What do you know, 4 triangles.

Pure CSS Triangle

Basic Triangle

So how do we single out just one of the triangles? Very simple. Define one edge as you normally would and make the borders next to it have the same values but instead of a color define it as transparent. Instant triangle. Lets see a working example.

<div class="basicTriangle"></div>

.basicTriangle {
height: 0;
width: 0;
font-size: 0;
line-height: 0;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #666;

Pure CSS Triangle

Speech Bubble

Now lets use it for a practical application: a pure CSS speech bubble. For this we are going to use a CSS style that is only supported in IE8 and above so it is recommended that if you use this in a production environment, make sure it is not part of the required styles that absolutely need to show.

First the markup.

<div class="speechBubble">
<p>Hello World</p>
</div> 

Technically this can be reduced to a single div but seeing how we want to give flexibility to what ever may be shown in the speech bubble, extra markup was used.

Some base CSS:

.speechBubble {
padding: 10px;
background: #4e99b8;
position: relative;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-o-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
width: 100px;
}

.speechBubble p{
font-size: 15px;
color: #fff;
text-align: center;

We define the div with a position: relative because we are going to use CSS to create the triangle element using the CSS style content and absolute position it into place.

.speechBubble:after {
position: absolute;
bottom: -10px;
left: 20px;
content:"";
display:block;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #4e99b8;

We now have a pure CSS speech bubble. You can modify any of the settings to make it work in your own setting such as give it a fluid width, but for ease of understanding I made it a fixed width.

Pure CSS Triangle

CSS Arrow Link

Lets get a little more fancy. Lets make a CSS arrow that is a link. This is the same basic concept as the speech bubble. The only difference is that the arrow is larger than the main element. Lets see how it works.

Markup:

<a href="#" class="arrow"></a> 

CSS:

.arrow {
height: 40px;
width: 40px;
background: #4e99b8;
margin: 20px 0 20px 20px;
position: relative;
display: block;
}

.arrow:after {
content: "";
position: absolute;
right: -30px;
top: -10px;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid #4e99b8;

Even though the triangle goes outside the main linked element, the triangle still retains the link making it really useful.

Pure CSS Triangle

Advanced Button with Triangles

Now for a more real world application. We are going to combing the before and after pseudo classes to create two elements to create a really neat CSS button. Now again, this involves a lot of CSS3 so older browsers (like IE) will look nothing like this so check it in browsers to make sure the style is acceptable before you use it in a production environment.

Markup:

<a href="#" class="advancedButton">Advanced Button</a> 

Base CSS:

.advancedButton {
display: block;
position: relative;
font-size: 13px;
width: 185px;
height: 40px;
line-height: 40px;
color: #666;
text-shadow: 1px 1px 0 #fff;
text-decoration: none;
padding-left: 15px;
background: #ededed;
background: -moz-linear-gradient(
top, #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%
);
background: -webkit-gradient(
linear,
left top, left bottom,
color-stop(0%,#ffffff),
color-stop(50%,#f1f1f1),
color-stop(51%,#e1e1e1),
color-stop(100%,#f6f6f6)
);
background: -webkit-linear-gradient(
top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%
);
background: -o-linear-gradient(
top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%
);
background: -ms-linear-gradient(
top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%
);
background: linear-gradient(
top, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%
);
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-o-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
border: 1px solid #ededed;

Holy cow thats a lot of CSS. Yes, well it is actually lighter than using an image so we deal with it. Lets make it better. Again, this is using the same concepts as we used above, just taking it a step further.

.advancedButton:before {
content: "";
position: absolute;
height: 25px;
width: 25px;
right: 10px;
top: 8px;
background: #666;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-o-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,.2);
}

.advancedButton:after {
content: "";
position: absolute;
height: 0;
width: 0;
line-height: 0;
font-size: 0;
right: 17px;
top: 13px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #fff;

And for fun lets add some hover effects:

 

.advancedButton:hover {
color: #87b77b;
}

.advancedButton:hover:before {
background: #87b77b;

Now that is a lot of CSS so take your time and go through it slowly so you know how it is working. If you read the article from the start you should have no problem understanding it.

Pure CSS Triangle

Compatibility

So what kinda of compatibility does this have? For the triangles it is supported back to IE7. IE6 technically supports it but it doesn’t support the transparent style so if you use it make sure instead of transparent it is the same color as your background. The before and after pseudo classes are supported in IE8 and newer. Other browsers you don’t need to worry about because it has backwards support for browsers that people are actually using.

So experiment and have fun with triangles. Let me know if you have any questions in the comment section below.

Also check out the live demo of everything that that article goes over.

View Demo

 

Utah Print and Web Design | Cibgraphics Design Studio

CSS Triangles

CSS Border Box

Basic Triangle

Speech Bubble

Hello World

Arrow with Link

Advanced Button

Advanced Button

_uacct = “UA-1928070-1”;
urchinTracker();

Advertisements
By Rz Rasel Posted in Css

16 comments on “Pure CSS Triangles, Tooltip, And Link

  1. Thanks for the good writeup. It in truth was once a amusement account it. Look advanced to more brought agreeable from you! By the way, how can we be in contact?

  2. I’m really enjoying the theme/design of your site. Do you ever run into any browser compatibility problems? A few of my blog readers have complained about my site not working correctly in Explorer but looks great in Safari. Do you have any advice to help fix this issue?

  3. I am really impressed with your writing skills and also with the layout on your weblog. Is this a paid theme or did you customize it yourself? Anyway keep up the excellent quality writing, it is rare to see a great blog like this one nowadays

  4. I am extremely impressed with your writing skills as well as with the layout on your blog. Is this a paid theme or did you modify it yourself? Either way keep up the excellent quality writing, it’s rare to see a great blog like this one nowadays

  5. I used to be recommended this web site by way of my cousin.

    I’m now not positive whether this publish is written by way of him as nobody else recognise such specified approximately my problem. You’re incredible!
    Thank you!

  6. Very nice post. I just stumbled upon your blog and wished to say that I’ve really enjoyed browsing your blog posts. After all I’ll be subscribing to your rss feed and I hope you write again very soon!

  7. I have been exploring for a bit for any high quality articles or blog posts on this kind of area . Exploring in Yahoo I at last stumbled upon this web site. Reading this information So i’m happy to convey that I’ve a very good uncanny feeling I discovered just what I needed. I most certainly will make certain to do not forget this website and give it a look regularly.

  8. A person necessarily assist to make critically posts I might state. This is the first time I frequented your website page and up to now? I amazed with the analysis you made to make this actual post incredible. Great process!

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s