haackmancss今回はcssを使ったお話。チャート画面を作りたいときにとっても便利なのがchart.jsです。chart.jsを使えば、とっても簡単にグラフやドーナッツチャートを生成することができます。chart.jsでは作れないものもあります。そのうちの一つがピラミッドチャート(勝手に名付けた)。ピラミッドチャートとは下のような全体の順位の割合や自分の位置が視覚的に見えるような図形のこと。今回はこれをcssを使って描写する方法を解説します。ピラミッドチャートは台形を組み合わせる上のようなピラミッドをcssで描くには、色分けされているので単に3角形を書けばいいというわけにもいきません。jsのcanvas要素を使えば書くこともできそうですが、今回はcssで台形を描写し、それを組み合わせて三角形にしていきます。}jsの中身の数値を変化させることで、ピラミッドの階層のパーセンテージも変化します。ピラミッドチャートを作りたいときに是非利用してみてください。台形はcssのborderを使って描写しています。横幅などはすべてjsで動的に変化させていますので汎用性が高いように設計してあります。コメントをキャンセルメールアドレスが公開されることはありません。Themeisle.。