Css と Div を使用して三角形を「描画」する_html/css_WEB-ITnose

このナビゲーションを見たときに、このような三角形をcssとhtmlで実現できないかと思い、インターネットで情報を探しました。要約は次のとおりです:
1. アイデアは非常にシンプルです。下の図を見てください (各辺は三角形の底辺のように見えますか)

html:

<div class="triangle"></div>

Css:

            .triangle{               border-style:solid;            border-width: 10px;            border-top-color:#009246;            border-left-color: #CE2B37;            border-bottom-color:#5E5E5E;            border-right-color: #000; }

2. div の幅と高さを調整するとどうなるでしょうか。要素は 0 です (他の属性は変更せず、幅と高さを 0 に設定します) はどうですか?

各辺は三角形ですか?

それを大きくしたい場合は、border-width 属性値をより大きな値に設定します。

3. 上向きの三角形が必要な場合は、他の 3 つの辺は表示せず、境界線の底部だけを残します。したがって、他の 3 つの辺の境界線の色を透明に設定し、その効果を確認します。

三角が出てきます。

三角形の位置を調整したい場合は、div.triangle{position:relative; top:0;right:10px;} のプロパティを設定することで設定できます。

最終結果は次のとおりです:

コードは次のとおりです:

<div class="triangle"></div>
呵呵，把这个div放到三角div后面，背景色和那个border-color颜色设置成一样就好了

/*Css*/       .triangle{            width:0px;            height:0px;            border-style:solid;            border-width: 10px;            border-color:transparent;            border-bottom-color:#5E5E5E;            position:relative;            top:0;            left:20px;        }        .drop-down{            width:150px;            padding:10px;            border-radius:5px;            background:#5E5E5E;            color:white;        }

拡張子: 疑似要素を使用する場合: before と：その後、あなたは持っていません空の div 要素を作成します (原理は当然、上記の空の div を使用する場合と同じです)。

矢印が上と左にある場合は :before を使用し、右と下にある場合は :after を使用します。

<!--html--><div class="no-empty-div">我们不需要空白的div来实现箭头了</div>

/*Css*/        .no-empty-div{            width:150px;            padding:10px;            border-radius:5px;            background:#5E5E5E;            position:relative;              }        .no-empty-div:before{            content:"";            display: block;            border-color: transparent;            border-bottom-color: #5E5E5E;            border-width: 10px;            border-style:solid;            width:0;            height:0;            position:absolute;            bottom:100%;            right:50%;        }

以下は左矢印です (位置の変化を確認するには、上向きのコードと比較できます):

<!--html--><div class="no-empty-div">我们不需要空白的div来实现箭头了</div>

/*Css*/  .no-empty-div{            width:150px;            padding:10px;            border-radius:5px;            background:#5E5E5E;            position:relative;        }        .no-empty-div:before{            content:"";            display: block;            border-color: transparent;            border-right-color: #5E5E5E;            border-width: 10px;            border-style:solid;            width:0;            height:0;            position:absolute;            top:20%;            right:100%;        }