css - 如何使用 css 在标签的右侧添加一个三 Angular 形？

Question

我想在右侧添加一个小三 Angular 形以与输入字段的开头重叠，但我没能做到。这是我的代码:

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%);
        }​

和 fiddle 的链接:http://jsfiddle.net/Luis_Armando/HeDVy/

Answer 1

要创建一个三 Angular 形，您可以使用以下 CSS。根据需要添加到您的代码中。

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

改变 border-width 参数来改变三 Angular 形的大小。