Question

Im trying to modify the following code so the little arrow is on the right hand side of the box but when I try and make the arrow smaller and change the position to relative it loses its shape. Any ideas ?

.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

Try this – 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;
}