CSS 箭头在与右侧对齐时出现故障

Question

我使用 CSS 在下拉菜单容器上放置一个小箭头。

http://jsfiddle.net/0bscj7tm/

#nav {
    position: relative;
    width: 200px;
    height: 200px;
    top: 20px;
    padding: 20px;
    border: 1px solid #f00;
    background: #fff;
}
#nav:after,
#nav:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    bottom: 100%;
    left: 20px;
    border: solid transparent;
    pointer-events: none;
}
#nav:before {
    border-color: rgba(0, 255, 255, 0);
    border-bottom-color: #f00;
    border-width: 8px;
    margin-left: -8px;
}
#nav:after {
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 7px;
    margin-left: -7px;
}

但是，我希望箭头从右侧对齐一定数量的像素。在 #nav:after, #nav:before 类中，我将 left: 20px 更改为 right: 20px，但这使得边框左侧箭头太粗，右侧不可见:http://jsfiddle.net/vx2Lpt19/1/

有人可以帮助我让箭头在距离右侧对齐 20 像素时看起来正确吗？

Answer 1

尝试更改您的 margin-left声明至margin-right下#nav:before和#nav:after .

以下是更改后的样子:http://jsfiddle.net/o4efcsk8/