Creating a Triangle marker in CSS

Question

I am working on a site that will have a main nav portion and a sub nav portion. When an item is selected, I want a triangle to appear below the selected list item. The triangle needs to look like it came from the area below it. In other words, something that looks like this:

+------------------------------------+
| Parent 1     Parent 2     Parent 3 |
+-----------------^------------------+
| Child 1     Child 2     Child 3    |
+---------------------------^--------+
| Information goes here              |
+------------------------------------+

I have created a JSFiddle. That Fiddle can be found here. From the fiddle, you can see that I have several problems. First, I can't seem to create a triangle. I currently have something that looks more like tabs. Those were created via some CSS that looks like this:

.mainSelected {    
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #95A9C2; 
    text-align:center;
}

The other issue is that I can't figure out how to get the triangles flush against the bottom . Maybe I'm going about it all wrong. Essentially, I'm trying to do something similar to the original DIGG design (http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/11/digg-old-v3-subnavigation-menu.jpg).

Thank you for your help!

checkout this post - http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color — Evgeniy, Feb 27 '14 at 07:04

score 3 · Accepted Answer · answered Feb 27 '14 at 07:10

Try something like this.

.mainSelected {
    text-align: center;
    position: relative;
}

/* this is the actual triangle */
.mainSelected:after {
    content: ' ';  
    width: 0;
    height: 0;
    display: block;
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #95A9C2; 
    position: relative;
    left: 40%;
}

You can see why it works here: http://css-tricks.com/snippets/css/css-triangle/

score 2 · Answer 2 · edited Feb 27 '14 at 11:11

A triangle pointing upwards can be created from a single <div> with the following css:

.arrow-up-div {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;

    border-bottom: 5px solid black;
}

Where the div has the class arrow-up-div.

More information and triangles can be found at http://css-tricks.com/snippets/css/css-triangle/

Creating a Triangle marker in CSS

2 Answers2