在边框上创建CSS箭头

Question

我试图修改下面的代码，因此小箭头位于框的右侧，但是当我尝试使箭头变小并将位置更改为相对时，它会失去其形状。有任何想法吗 ？

.title-box:after {
    content:"";
    border-color: transparent transparent transparent #00f;
    border-style:solid;
    border-width:5px;
    width:0;
    height:0;
    bottom:-20px;
    left:138px;
    }

http://jsfiddle.net/hyH48/

Answer 1

试试这个 - DEMO

#mybox:after {
    content:"";
    border-color: transparent transparent transparent #ff0;
    border-style:solid;
    border-width:15px;
    width:0;
    height:0;
    position:absolute;
    top: 35px;
    right: -30px;
}