css3 버튼의 문제

Question

나는 ipad를 기반으로 뒤로 버튼을 만들려고하고 있습니다. 버튼과 화살표가 있으며 버튼과 일치시키기 위해 화살표 높이를 줄여 줄 수없는 것처럼 보입니다. 화살의 높이를 줄이면 제대로 보이지 않습니다.

여기 내 코드의 화살표 스타일하기 Sandeep에

감사합니다 .. 등 지금까지 http://jsfiddle.net/dVbJr/5/

Answer 1

당신이 쉽게 CSS를 통해 할 수 있습니다 : -

.arrow:after{ 
    -moz-transform: rotate(45deg); 
    background: none repeat scroll 0 0 #F4F4F4; 
    border: 1px solid #999999; 
    border-radius: 10px 10px 10px 10px; 
    content: ""; 
    height: 75px; 
    position: absolute; 
    right: -53px; 
    top: -33px; 
    width: 45px; 
} 

데모를 참조하십시오 - 0

.arrow:after{ 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
    background: none repeat scroll 0 0 #F4F4F4; 
    border: 1px solid #999999; 
    border-radius: 10px 10px 10px 10px; 
    content: ""; 
    height: 75px; 
    position: absolute; 
    right: -53px; 
    top: -33px; 
    width: 45px; 
} 

지금 순수 CSS 기반의 모양에 대한 추가 정보를위한 작업 웹 키트 브라우저 ...

읽기 -이 : 12,

이와 CSS를 업데이트하십시오

업데이트 이 기사 : - http://www.css3shapes.com/

Answer 2

reducse 이미지 높이 포토샵에서 당신은 다음 HTML 태그를 사용하여 큰 이미지를 사용하려는 경우 수행 근래 무엇을 및 CSS에서 제어 높이 ...

Answer 3

훨씬 간단한 방법으로 할 수 있습니다. 버튼 만 부르면 돼. 여분의 요소가 없습니다.

편집이 같은 뭔가 :

.backLstBtn { 
    margin: 125px; 
    padding: 7px; 
    border: 1px solid #999; 
    border-left: none; 
    border-radius: 0 7px 7px 0; 
    position: relative; 
    font-size: 11px; 
    font-weight: bold; 
    background: linear-gradient(#FDFDFD, #F4F4F4); 
    cursor: pointer; 
} 
.backLstBtn:before { 
    left: -13px; 
    top: 1px; 
    height: 25px; 
    width: 24px; 
    border-radius: 7px; 
    transform: rotate(45deg); 
    border-left: solid 1px #999; 
    border-bottom: solid 1px #999; 
    position: absolute; 
    z-index: -1; 
    background: linear-gradient(-45deg, #FDFDFD, #F4F4F4); 
    content: ''; 
} 

당신이있어 http://dabblet.com/gist/2761845

Answer 4

행동에 그것을 볼 수 있습니다이 훨씬 간단 할 수 있습니다. 예를 들어 http://cssarrowplease.com/ 같은 꽤 좋은 제너레이터가 있습니다.