如何使用边框创建一个三角形/箭头形状（向右指）

Question

我需要仅使用HTML/CSS创建以下图片：

我一直在测试，我成功创建了一个带箭头的盒子，但是箭头在顶部而不是侧面（您可以在fiddle链接中看到）：

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

有人能帮助我将箭头移到右侧吗？注意：我发现如果我将border-bottom-color更改为border-right-color，箭头会移到侧面，但三角形指向错误方向。

- Adam

Answer 1

jsFiddle演示

你所需要的一切

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

- Roko C. Buljan

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

- Delorian