Outline of a tag-like shape - html

Question

I've made a tag-like shape in HTML/CSS as can be seen here - http://jsfiddle.net/RuXyP/
.tag {
float: left;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
I'm attempting to add an outline to it and have got as far as this - http://jsfiddle.net/RuXyP/1/
However, I'm struggling to work out how to add an outline to the arrow bit.
I can't use a border as that's how the arrow is created
I can't use outline as it can't be specified for individual sides
Is there any way for this to be done?

Answer 1

I prefer to not use pseudo selectors for this, and instead just use two divs for the triangle, one 1px larger than the other, and you simply move the margin over on the second div. Like so:
.arrow-border {
width: 0;
height: 0;
float: left;
margin-top: 1px;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid #FF00FF;
}
.arrow-right {
width: 0;
height: 0;
float: left;
margin-left: -9px; /* Width of .arrow-border's border */
margin-top: 2px;
border-top: 8px solid transparent; /* One less than .arrow-border's border width */
border-bottom: 8px solid transparent;
border-left: 8px solid #2e353d;
}
Demo: http://jsfiddle.net/RuXyP/4/
Nit: Keep in mind that if you put this in a container smaller than your arrow, it is possible that the arrow head will detach. Generally this shouldn't be a problem.

Answer 2

you could use a pseudo element and absolute position:
The idea is to stack both pseudo:before and after on top of eachother, and draw one that is 1pixel larger on each sides. Set the biggest underneath to draw the red border-color .
DEMO
.tag {
float: left;
position:relative;
text-align: center;
height: 14px;
width: 110px;
background-color: #2e353d;
color: #FFFFFF;
padding-top: 2px;
margin-top: 1px;
font-size: 10px;
border: 1px solid #FF00FF;
border-right: none;
}
.tag:after, .tag:before {
content:'';
margin-right:-10px;
width: 0;
height: 0;
position:absolute;
top:0px;
left:100%;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 8px solid #2e353d;
}
.tag:before {
top:-1px;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 9px solid #FF00FF;
}