私はすでに非常によく似た質問をしましたが、それはjavascript/phpを使用していました-理想的な解決策を見つけることができなかったので、以下に似たCSSだけを使用してグラフをエミュレートしてみます
ご覧のとおり、グラフの行には、別の色と黒い境界線でオーバーレイされた 2 番目の要素があります。これは私が達成しようとしているスタイルです。これについて最善の方法を提案できる人はいますか?
別のグラフの上に別のグラフを重ねて作成することで、これを行うための最良の方法を誰かが提案できますか?

私はすでに非常によく似た質問をしましたが、それはjavascript/phpを使用していました-理想的な解決策を見つけることができなかったので、以下に似たCSSだけを使用してグラフをエミュレートしてみます
ご覧のとおり、グラフの行には、別の色と黒い境界線でオーバーレイされた 2 番目の要素があります。これは私が達成しようとしているスタイルです。これについて最善の方法を提案できる人はいますか?
別のグラフの上に別のグラフを重ねて作成することで、これを行うための最良の方法を誰かが提案できますか?

純粋な CSS http://dabblet.com/gist/3142994でグラフを作成しようとする私の試み
...そして、はるかに少ない HTML とよりクリーンな CSS を備えた 2 番目のバージョン: http://dabblet.com/gist/3143479
この場合、車輪を再発明する代わりに、既存の視覚化 API を使用することをお勧めします。Google はかなり広範なものを提供しています。
https://developers.google.com/chart/interactive/docs/gallery
冒険心があり、これがあなたの求めているものではない場合は、 を使用float: right;して左のバーを右に揃えます。