css - cssを使用してラベルの右側に三角形を追加する方法は?

Question

入力フィールドの先頭と重なるように右側に小さな三角形を追加したいのですが、できませんでした。これが私のコードです：

HTML:

<div id="wrapper">
            <form>
                <label>First Name</label><input type="text" name="firstname" id="first" placeholder="Jorge" />
               <label>Last Name</label><input type="text" name="lastname" id="last" placeholder="Gonz&aacute;lez" />
               <label>Email</label> <input type="email" name="username" id="un" placeholder="jgon@gmail.com"/>
               <label>Password</label> <input type="password" name="password" id="pass" placeholder="********" />
               <input type="submit" value="Sign up" id="submit" />
            </form>
        </div>​

CSS:

html{background-color:#000;}
label{
            font-weight: bold;
            background: -webkit-linear-gradient(#3073BF 0%, #204C7F 100%);
            padding: .7em .85em .8em 0em;
            display: block;
            width: 100px;
            float: left;
            border-radius: .3em 0px 0px .3em;
            margin: 5px 0;
            color: #102640;
            text-shadow: 0px 1px 1px #fff;/*rgba(0, 0, 0, 0.3);*/
            height: 17px;
        }
        #wrapper{
            width: 800px;
            margin: 3em auto;
            background: white;
            padding: 2em 4em;
            border-radius: .5em;
            box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.3);
        }
        form{
            width: 330px;
            margin: 0 auto;
            text-align: right;
        }
        input{
            padding: .5em;
            border-radius: 0px 4px 4px 0px;
            border: 1px solid #bcbcbc;
            margin: .3em 0;
            font-size: 1.1em;
        }
        #submit{
            text-align: center;
            clear: both;
            float: none;
            position: relative;
            right:10px;
            margin: 1em;
            padding: 1em 3em;
            background: -webkit-linear-gradient(#fff1ba 0%, #ffc400 100%);
            border: 1px solid #ffb135;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
            font-weight: bolder;
            color: #a74f00;
            font-size: 1em;
            text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.7);
            cursor: pointer;
            border-radius: .3em;
            width:300px;
        }
        #submit:hover{
            background: -webkit-linear-gradient(#ffc400 0%, #fff1ba 100%);
        }​

フィドルへのリンク: http://jsfiddle.net/Luis_Armando/HeDVy/