html - 如何创建带边框的三 Angular 形/箭头形状(指向右)

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，箭头会转到一边，但三 Angular 形指向错误的方向。

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