conic-gradient() ファンクション
conic-gradient() ファンクションは、任意の中心から扇状に色を描写する CSS 関数です。
デフォルトでは１２時の位置から時計回りに指定角度に分けて指定色を描写します。
conic-gradient() は、円グラフ、市松模様を描くことができます。
div.example{
background: conic-gradient(white, black 50%);
}
以下は、上記の例を描写したものです。
詳しくは Example を参照してください
background プロパティといった描写に関するプロパティで使用します。
似たプロパティに、線形グラデーションを描写する linear-gradient() や 円形状に描写する radial-gradient() ファンクションがあります。
ページ内 Index
構文(Syntax)
CSS
conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> .. );
引数
引数では、配色の開始角度、中心位置、色と範囲を指定します。
from キーワードに続いて配色の開始角度を指定。
at キーワードに続いて中心位置を指定。% またはキーワードで指定する。デフォルトではエレメントの中心 at 50% 50% になる。
色と範囲を指定。範囲は角度で指定する。範囲は開始位置と終了位置を指定する。開始位置のみはグラデーションで表示される。範囲を指定しないと自動で均等に割られる。
Example
以下は conic-gradient() ファンクションの例です。
３色を指定
３色の指定例です。中心位置、開始位置は指定していません。
デフォルトでは、中心位置はエレメントの中心。開始位置は１２時の位置。色の配置範囲をしていませんので均等に配置されグラデーションで表現されます。
中心位置と配色の開始角度を指定
以下の例は、中心位置と配色の開始角度を指定しています。
円グラフ
色の開始位置と終了位置を指定しています。開始位置と終了位置を指定するとグラデーションではなくソリッドな配色になります。
開始位置と終了位置を指定しないと自動で補完されます。
市松模様
conic-gradient() ファンクションで作成した白黒の模様をデフォルトの繰り返しで表示します。background-size プロパティで１つのサイズを変更することで見た目を変えることができます。
囲み線
border-image プロパティで conic-gradient() を囲み線として利用します。