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/

Answer 1

당신이 CSS를 사용할 수 있습니다 삼각형을 만들 수 있습니다. 필요에 따라 코드에 추가하십시오.

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

경계 - 폭 매개 변수를 변경하여 삼각형의 크기를 변경하십시오.