css3按鈕中的問題

Question

我正在創建一個基於ipad的後退按鈕。 我有一個按鈕和箭頭，似乎無法降低箭頭的高度以匹配按鈕。如果我減少箭頭的高度，它不會正確顯示。

由於桑迪普的箭頭樣式..

這裏是我的代碼，以什麼我甲肝到目前爲止 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; 
} 

看到演示： - http://jsfiddle.net/dVbJr/11/

修訂

請與本更新你的CSS： -

.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的形狀讀這篇文章： - http://www.css3shapes.com/

Answer 2

reducse圖像高度在Photoshop中，如果你想使用大圖像，然後使用HTML標籤來實現的而在CSS控制高度...

Answer 3

你可以做得更簡單，u唱只是按鈕。沒有額外的元素。

編輯： 事情是這樣的：

.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/。