HTML_CSS
Googleでログイン
問題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¥
補足
円形を作るには正方形の要素に対して
border-radisu: 50%;を付与してあげれば作ることが出来ました。
要素を4分割してborder-radisu: 50%;を付与して作ることもできますが、
それだとかなり手間がかかってしまいます。
こういう時は今回登場したconic-gradient関数を使用することで簡単に表示させる事ができます。
border-radisu: 50%;を付与してあげれば作ることが出来ました。
要素を4分割してborder-radisu: 50%;を付与して作ることもできますが、
それだとかなり手間がかかってしまいます。
こういう時は今回登場したconic-gradient関数を使用することで簡単に表示させる事ができます。
完了にする！
活動記録をTweetする
1.HTMLの宣言をしてみよう
の行でグラフを表現しております。
プロパティには、色の選択と開始と終了を決めるだけです。