css - 境界線上に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

これを試してください-デモ

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