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