제출 버튼 중간에있는 반투명 삼각형 모양

Question

양식에 제출 버튼을 다음과 같이 작성하려고합니다 : http://nulaena.si/temp/triangle.jpg (중간에 반투명 삼각형). http://jsfiddle.net/ptinca/UJUAT/3/

는 CSS와 함께이 가능 :

이 나는 ​​순간이 무엇인가? 어떤 도움을 많이 주시면 감사하겠습니다.

Answer 1

투명한 PNG 이미지를 제출 버튼의 배경 이미지로 사용하면 효과가 있습니다.

background: url(subscribe.png) transparent no-repeat; 

편집 :

명확히하기 위해, 이미지는 물론 그 안에 삼각형, 함께 오렌지 배경이 있어야합니다.

Answer 2

CSS3을 필요로하지 않지만 css2 의사 클래스 만 사용해야하는 매우 쉬운 방법이 있습니다. 중요한 변경 사항은 같은 입력으로 인라인 요소에 의사 클래스를 적용 할 수 있습니다주의해야 할, 그래서 버튼 요소에 버튼을 제출하여 입력을 변경했다

여기에 추가 코드입니다 :

html: 
<form> 
<input type="text" name="email" value="enter your email address" class="besedilo" /> 
<button type="submit" name="subscribe" value="subscribe" class="submit">Subscribe</button> 
</form> 

css: 
button { position: relative; } 
button:after { 
content: ''; 
position: absolute; 
top: 14px; right: 17px; 
height: 0; width: 0; 
border-top: solid 6px transparent; 
border-left: solid 6px #fff; 
border-bottom: solid 6px transparent; 
}