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

この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;
}

現在、Webキットブラウザが動作しています...

純粋な CSS ベースのシェイプの詳細については、この記事をお読みください:- http://www.css3shapes.com/

于 2012-05-21T10:37:38.473 に答える
0

大きな画像を使用する場合は、Photoshop で画像の高さを減らしてから、HTMl タグを使用し、CSS で高さを制御します...

于 2012-05-21T10:33:03.107 に答える