html - 标签状形状的轮廓

Question

我在 HTML/CSS 中制作了一个类似标签的形状，如下所示 - 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;
}

我正在尝试为其添加大纲，目前已达到此目的 - http://jsfiddle.net/RuXyP/1/

但是，我正在努力研究如何向箭头位添加轮廓。 我不能使用边框，因为箭头是这样创建的 我不能使用轮廓，因为它不能为各个边指定

有什么办法可以做到这一点吗？

Answer 1

我不喜欢为此使用伪选择器，而是只为三 Angular 形使用两个 div，一个比另一个大 1px，然后您只需将边距移到第二个 div 上。像这样:

.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;
}

演示:http://jsfiddle.net/RuXyP/4/

Nit:请记住，如果将其放入比箭头小的容器中，箭头可能会脱落。通常这应该不是问题。