0

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

感谢 Sandeep 的箭头风格..

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

4

4 回答 4

2

你可以用一种更简单的方式来完成它，只需使用按钮。没有多余的元素。

编辑：像这样的东西：

.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

于 2012-05-21T10:48:10.253 回答
1

这可以简单得多。那里有一些非常好的生成器：例如http://cssarrowplease.com/ 。

于 2012-05-21T10:55:08.027 回答
0

如果要使用大图像，请减少 Photoshop 中的图像高度，然后使用 HTMl 标记并在 css 中控制高度...

于 2012-05-21T10:33:03.107 回答
0

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

于 2012-05-21T10:37:38.473 回答