Question

我想创建一个基于ipad的后退按钮。我有一个按钮和箭头，似乎无法降低箭头的高度以匹配按钮。如果我减小箭头的高度，它就不会正确显示。

感谢sandeep的箭头风格..

这是我到目前为止所做的代码 http://jsfiddle.net/dVbJr/5/

Answer 1

只需使用按钮，您就可以以更简单的方式完成此操作。没有额外的元素。

修改：像这样：

.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 2

这可以做得更简单。那里有一些相当不错的发电机：例如http://cssarrowplease.com/。

Answer 3

如果你想使用大图像然后在CSS中使用HTMl标签和控制高度，那么

降低photoshop中的图像高度...

Answer 4

你可以很容易地通过这个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/

css3按钮中的问题

4 个答案: