ログイン
問題20

backgroundと角丸で円グラフを作ろう

CSSをうまく使えば、円グラフも作ることができます。 これまでの問題を通して、円形自体は作れるようになっていると思うので配色の仕方も覚えていきましょう!

アイコン画像

問題20:backgroundと角丸で円グラフを作ろう

円グラフを作成しましょう。

見本画像を参考にして実装してください。

エディターのアイコンあらかじめエディタに書くコード

                <div class="radius"></div>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <div class="radius"></div>
¥HTML¥
            
              .radius {
  width: 340px;
  height: 340px;
  background: conic-gradient(red 0% 25%, yellow 25% 50%, blue 50% 100%);
  border-radius: 50%;
}
¥CSS¥
            

コメントのアイコン解説

background: conic-gradient(red 0% 25%, yellow 25% 50%, blue 50% 100%);
の行でグラフを表現しております。

プロパティには、色の選択と開始と終了を決めるだけです。
ログインして解答を見る

コメントのアイコン補足

円形を作るには正方形の要素に対して
border-radisu: 50%;を付与してあげれば作ることが出来ました。

要素を4分割してborder-radisu: 50%;を付与して作ることもできますが、
それだとかなり手間がかかってしまいます。

こういう時は今回登場したconic-gradient関数を使用することで簡単に表示させる事ができます。
完了にする!
twitterのアイコン
活動記録をTweetする
1.HTMLの宣言をしてみよう
続きの動画を見たい方は公式LINEから「HTML」と送信すると動画が見れます。
HTML_CSSを学ぶなら現役エンジニア監修「甲賀コース」
LINEの友達追加でお役立ち動画をGET!!

閉じる