パーツ番号 09-11-09 ・ CSSのみ

二極比較評価(良い/普通/悪いの割合)

ポジティブ評価とネガティブ評価の比率を1本のバーで示す表示。満足度調査の結果表示などに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="polar">
          <div class="track">
            <i class="pos" style="width:72%"></i>
          </div>
          <div class="lbls">
            <span class="p">良い 72%</span>
            <span class="n">悪い 28%</span>
          </div>
        </div>

CSS

.d09-11-09 .polar{ width:100%; max-width:220px; }
        .d09-11-09 .track{ height:10px; border-radius:5px; background:#f3d3d8; overflow:hidden; }
        .d09-11-09 .track .pos{ display:block; height:100%; background:#3fb27f; }
        .d09-11-09 .lbls{ display:flex; justify-content:space-between; margin-top:8px; font-size:12px; }
        .d09-11-09 .lbls .p{ color:#2f9e5c; }
        .d09-11-09 .lbls .n{ color:#c1495a; }

クラス名 .d09-11-09 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。