如何创建带边框的三角形/箭头形状（指向右侧）

Question

我需要在HTML / CSS中创建以下图像：

我一直在测试，我已经能够用箭头创建正确的方框但箭头位于顶部而不是侧面（您可以在小提琴链接中看到）：

http://jsfiddle.net/130mko3w/

将箭头置于顶部的代码如下：

.arrow_box:after, .arrow_box:before {
    border: 13px solid transparent;
    position: absolute;
    content: '';
    left: 90%;
    bottom:100%;
}

.arrow_box:after {
    border-bottom-color: #fafafa;
    border-width: 14px;
    margin-left: -24px;
}

.arrow_box:before {
    border-bottom-color: #999;
    border-width: 15px;
    margin-left: -25px;
}

有人能够协助我向右移动箭头。注意：我发现如果将边框底部颜色更改为边框右侧颜色，则箭头会移到侧面，但三角形指向错误的方向。

Answer 1

<强> jsFiddle demo

你需要的一切

.arrow_box:after, .arrow_box:before { /* both border styles */
    border: 14px solid transparent;
    border-left-color: #f2f2f2;
    position: absolute;
    content: '';
    left: 100%;
    top: 15px;
}
.arrow_box:before {             /* alter only for :before pseudo element */
    border-left-color: #aaa;
    border-width: 16px;
    margin-top: -2px;
}

Answer 2

这应该适合你：

http://jsfiddle.net/130mko3w/

.arrow_box:after, .arrow_box:before {
border: 13px solid transparent;
position: absolute;
content: '';
left: 107%;
bottom: 60%;
}
.arrow_box:after {
border-left-color: #eee;
border-width: 14px;
margin-left: -24px;
}
.arrow_box:before {
border-left-color: #aaa;
border-width: 16px;
margin-left: -24px;
top: 34px;
}