2

シンプルな上向き矢印、下向き矢印、左向き矢印、右向き矢印を作成するには、この css クラスを見つけてください。

<html>
<style>
.left {border-bottom: 10px solid transparent;
    border-right: 10px solid red;
    border-top: 9px solid transparent;
    float: left;}
.right {border-bottom: 10px solid transparent;
    border-left: 10px solid red;
    border-top: 9px solid transparent;
    float: left;}
.top{ border-color: black transparent transparent;
    border-style: solid;
    border-width: 11px 7px 10px;
    float: left;}
.bottom {border-color: transparent transparent black !important;
    border-style: solid;
    border-width: 0 27px 19px 25px;
    float: right;}  
</style>    
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
<div class="bottom"></div>
</html>

クラス left は左矢印を意味します。簡単な css を使用して矢印を作成するより良い方法を教えてください。

4

3 に答える 3

3

質問で提示したソリューションは、IE7 の互換性を気にする場合に最適です。

はい、同じことを達成する他の方法があります。

たとえば、IE7 のサポートを削除すると、これらと同じスタイルを:before/:after疑似要素に適用して、HTML が乱雑になるのを避けることができます。

グラデーションを使用して三角形を作成するオプションもあります- example。ただし、これは現在の IE バージョンである IE9 でも機能しない1 つの解決策です。

于 2012-07-29T20:52:39.103 に答える
1

css のトリックは、ブラウザー/バージョンによって制限される場合があります。

ここでアイコン画像を取得することもできます: http://www.iconarchive.com/search?q=arrow+up

小さいものはこちら: http://p.yusukekamiyamane.com/icons/search/fugue/#keyword=arrow

于 2012-07-29T19:11:17.580 に答える
0

このスタイルを使用して css 矢印を作成できます。矢印の幅と高さを設定する必要があります。

div.left {
    z-index: 2000;
    width: 80px;
    height: 80px;
    border-top: 2px solid #ddd;
    border-left: 2px solid rgba(150,150,150,0.4);
    text-indent: -90000px;
    cursor: pointer;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

また、より簡単な方法が必要な場合は、いつでも画像を使用するように切り替えることができます

于 2012-07-29T19:02:14.767 に答える