CSS のさまざまな方向矢印を使って遊んでみましょう

ページを開発するとき、矢印の使用が必要なリストがたくさんあります。画像を背景として直接使用できます。純粋な CSS も使用でき、互換性の問題はありません必要ありません。それに比べて、CSS3 は画像よりもうまく機能します。

原理: 高さと幅が等しい正方形で、必要な辺を選択してそれを切ると台形になります。高さと幅が 0 で、他の辺が透明な場合、CSS のさまざまな方向矢印を使って遊んでみましょうになります。出てきます

台形コード:

html:
<div class="arrow"></div>
css:
arrow{
width:10px;
height:10px;
border:10px solid #000;
border-left-color:orange;
}

高さと幅を0に設定し、他の辺を透明色にすると、CSS のさまざまな方向矢印を使って遊んでみましょうが出てきます。

html:
<div class="arrow"></div>
css:
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;//左箭头
}

開発では、DOM 構造を変更せずに、疑似クラスを使用して実装を配置できます。これはシンプルでエレガントです。 content はCSS のさまざまな方向矢印を使って遊んでみましょうの位置を提供します。この属性を省略することはできません。

html:
<div class="arrow">文字文字</div>
css:
div{
position:relative;
arrow{
width:0;
height:0;
border: 10px solid transparent;
border-left-color: orange;
position:absolute;
content:&#39;&#39;;
}

グラフィック デザインを追求している今、別のタイプの 三角線矢印 があり、こちらの方が人気があります。
2 つの疑似クラスを設定します。最初の疑似クラスは、他の疑似クラスをカバーします。いくつかの行を省略してください:

html:
<div class="arrow">文字文字</div>
CSS:
div {
       position: relative; 
    }
    .arrow:after,.arrow:before {
        width: 0;
        height: 0;
        border: 10px solid transparent;
        border-left-color: orange;
        position: absolute;
        content: "";
    }
   .arrow:before{
    top: 0;
   left: 70px;//根据实际情况调整
   border-left-color: white;
   }

may you like it.

読んでくれた皆さんありがとうございます、たくさんの利益が得られることを願っています。

この記事は、https://blog.csdn.net/qq_34250472/article/details/55513862

から転載されたものです:「CSS チュートリアル 」

以上がCSS のさまざまな方向矢印を使って遊んでみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。