How to add a triangle to the right of the labels using css?

I want to add a little triangle to the right to overlap with the beginning of the input field but I haven't been able to. Here's my code:

HTML:

<div> <form> <label>First Name</label><input type="text" name="firstname" placeholder="Jorge" /> <label>Last Name</label><input type="text" name="lastname" placeholder="Gonz&aacute;lez" /> <label>Email</label> <input type="email" name="username" placeholder="[email protected]"/> <label>Password</label> <input type="password" name="password" placeholder="********" /> <input type="submit" value="Sign up" /> </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%); }​

and the link to the fiddle:

1 Answer

To create a triangle you can use following css. Add to your code as required.

.triangle{ width: 0px; height: 0px; border-style: solid; border-width: 30px 0 30px 20px; border-color: transparent transparent transparent #007bff;
}

Change border-width parameters to change size of triangle.