2018年07月12日
linear-gradient() ③方向指定
◆方向、開始色、終了色の順番で指定
・方向は、方向名か角度で指定
・色は、色名、16進トリプレット(#------)、rgb、rgbaで指定
◆↑ to top=0deg 下から上へ 開始線は9時の針、12時の方向へ
background-image:linear-gradient(to top,yellow 50%,aqua 50%);
background-image:linear-gradient(0deg,yellow 50%,aqua 50%);
・下から上へ、黄色で始まり、水色で終わる
・下半分は黄色のベタ塗り
・上半分は水色のベタ塗り
◆↗ to top right=to right top 左下から右上へ
background-image:linear-gradient(to top right,yellow 50%,aqua 50%);
background-image:linear-gradient(to right top,yellow 50%,aqua 50%);
・左下から右上へ、黄色で始まり、水色で終わる
・左下半分は黄色のベタ塗り
・右上半分は水色のベタ塗り
◆→ to right=90deg 左から右へ 開始線は12時の針、3時の方向へ
background-image:linear-gradient(to right,yellow 50%,aqua 50%);
background-image:linear-gradient(90deg,yellow 50%,aqua 50%);
・左から右へ、黄色で始まり、水色で終わる
・左半分は黄色のベタ塗り
・右半分は水色のベタ塗り
◆↘ to bottom right=to right bottom 左上から右下へ
background-image:linear-gradient(to bottom right,yellow 50%,aqua 50%);
background-image:linear-gradient(to right bottom,yellow 50%,aqua 50%);
・左上から右下へ、黄色で始まり、水色で終わる
・左上半分は黄色のベタ塗り
・右下半分は水色のベタ塗り
◆↓ to bottom=180deg 上から下へ 開始線は3時の針、6時の方向へ
background-image:linear-gradient(to bottom,yellow 50%,aqua 50%);
background-image:linear-gradient(180deg,yellow 50%,aqua 50%);
・上から下へ、黄色で始まり、水色で終わる
・上半分は黄色のベタ塗り
・下半分は水色のベタ塗り
◆↙ to bottom left=to left bottom 右上から左下へ
background-image:linear-gradient(to bottom left,yellow 50%,aqua 50%);
background-image:linear-gradient(to left bottom,yellow 50%,aqua 50%);
・右上から左下へ、黄色で始まり、水色で終わる
・右上半分は黄色のベタ塗り
・左下半分は水色のベタ塗り
◆← to left=270deg 右から左へ 開始線は6時の針、9時の方向へ
background-image:linear-gradient(to left,yellow 50%,aqua 50%);
background-image:linear-gradient(270deg,yellow 50%,aqua 50%);
・右から左へ、黄色で始まり、水色で終わる
・右半分は黄色のベタ塗り
・左半分は水色のベタ塗り
◆↖ to top left=to left top 右下から左上へ
background-image:linear-gradient(to top left,yellow 50%,aqua 50%);
background-image:linear-gradient(to left top,yellow 50%,aqua 50%);
・右下から左上へ、黄色で始まり、水色で終わる
・右下半分は黄色のベタ塗り
・左上半分は水色のベタ塗り
◆方向指定一覧表
| 0deg | 12時の方向へ | 9時の針が開始線 | to top |
| 30deg | 1時の方向へ | 10時の針が開始線 | |
| 60deg | 2時の方向へ | 11時の針が開始線 | |
| 90deg | 3時の方向へ | 12時の針が開始線 | to right |
| 120deg | 4時の方向へ | 1時の針が開始線 | |
| 150deg | 5時の方向へ | 2時の針が開始線 | |
| 180deg | 6時の方向へ | 3時の針が開始線 | to bottom |
| 210deg | 7時の方向へ | 4時の針が開始線 | |
| 240deg | 8時の方向へ | 5時の針が開始線 | |
| 270deg | 9時の方向へ | 6時の針が開始線 | to left |
| 300deg | 10時の方向へ | 7時の針が開始線 | |
| 330deg | 11時の方向へ | 8時の針が開始線 |
この記事へのコメント
コメントを書く
この記事へのトラックバックURL
https://fanblogs.jp/tb/7880651
※言及リンクのないトラックバックは受信されません。
この記事へのトラックバック
