CSS および CSS3 は三角形要素の描画を実装します

この記事では、三角形要素を描画するための CSS と CSS3 の実装を主に紹介します。これを必要とする友人に共有します。

フロントエンド ページには三角形が必要です。アイコンまたは三角形のスタイル ほとんどの三角形はフォント アイコンを使用して実装されていますが、いくつかの大きな三角形モジュールは依然としてフロント エンドで CSS スタイルを使用して描画する必要があります。以下では、さまざまな角度の三角形の CSS スタイル コードを紹介します。誰にとっても役立つでしょう

1 : 上三角

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2: 三角下

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

3: 三角左

#triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

4: 三角-右

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

5:: 三角形-上左

#triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

6: 三角形-右上

#triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent; 
}

7: 三角形-下左

#triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

8: 三角形-右下:

#triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

この記事は以上です。すべてのコンテンツについては、PHP 中国語 Web サイトに注目してください。関連コンテンツの詳細については、こちらをご覧ください。

関連する推奨事項: 傾きと回転のアニメーション効果を実現する

CSS3

以上がCSS および CSS3 は三角形要素の描画を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。