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 で動かないんですけどね…。