CSS のみで矢印を描画する

こんなのを用意して

<style type="text/css">
    .setting-arrow {
        margin: 0px 10px 0px 0px;
        width: 10px;
        height: 40px;
        background: #fff;
        position: relative;
    }
    .setting-arrow:after {
        position: absolute;
        top: -20px;
        left: 100%;
        content: "";
        border-top: 40px solid transparent;
        border-bottom: 40px solid transparent;
        border-left: 10px solid #fff;
        z-index: 1;
    }
    .setting-arrow-disabled {
        background: #bfbfbf;
    }
    .setting-arrow-disabled:after {
        border-left: 10px solid #bfbfbf;
    }
    .setting-arrow-enabled {
        background: #71893f;
    }
    .setting-arrow-enabled:after {
        border-left: 10px solid #71893f;
    }
    .setting-arrow-inner {
        top: 2px;
        left: 2px;
        width: 10px;
        height: 36px;
        background: #000;
        position: relative;
        z-index: 2;
    }
    .setting-arrow-inner:after {
        position: absolute;
        top: -6px;
        left: 100%;
        content: "";
        border-top: 24px solid transparent;
        border-bottom: 24px solid transparent;
        border-left: 6px solid #000;
        z-index: 2;
    }
    .setting-arrow-inner-disabled {
        background: #aaa;
    }
    .setting-arrow-inner-disabled:after {
        border-left: 6px solid #aaa;
    }
    .setting-arrow-inner-enabled {
        background: #9bbb59;
    }
    .setting-arrow-inner-enabled:after {
        border-left: 6px solid #9bbb59;
    }
</style>

こんな感じで使う。

<div class="setting-arrow setting-arrow-enabled">
    <div class="setting-arrow-inner setting-arrow-inner-enabled" />
</div>

まあ、「:after」とか使ってて IE7 で動かないんですけどね…。