CSSで三角矢印を描く

CSSで三角矢印を描きます。純粋な CSS を使用すると、非常に少ないコードだけで、さまざまなブラウザと互換性のある三角形の矢印を作成できます。

CSS コード:

/* create an arrow that points up */
div.arrow-up {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;  /* left arrow slant */
    border-right: 5px solid transparent; /* right arrow slant */
    border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points down */
div.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points left */
div.arrow-left {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;  /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-right: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}
 
/* create an arrow that points right */
div.arrow-right {
    width: 0;
    height: 0;
    border-bottom: 5px solid transparent;  /* left arrow slant */
    border-top: 5px solid transparent; /* right arrow slant */
    border-left: 5px solid #2f2f2f; /* bottom, add background color here */
    font-size: 0;
    line-height: 0;
}

これらの三角形を描く鍵は、矢印の方向の 2 つの辺に太い境界線を持たせることです。矢印の反対側にも同じ太い枠線があり、この側の色が三角形の色になります。境界線が太くなるほど、三角形は大きくなります。このようにして、さまざまな色、サイズ、方向の矢印を描画できます。最も良い点は、この効果を実現するために必要な CSS コードは数行だけであるということです。