cssだけで矢印を作ってみる

cssだけで矢印を作るのが、意外と簡単だったのでやってみました。

<div></div>

/**
 * 上向きの矢印を作ってみる
 * 幅を持ったborderを用意して、border-bottom以外の色を背景透過にするばOK
 */
div {
    width: 0px;
    border-color: black;
    border-style: solid;
    border-width: 30px;
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
}

こんな感じになります。