技術

CSSのbackgroundで複数の背景色を設定してみる

投稿日:

こんにちは

仕事で複数の背景色を設定する機会がありましたので
今回はそのやり方を書いていこうと思います。

degの部分で角度を調整します。例えば180degにすると横になります。
色範囲の指定ですが、例えば0~50%の範囲を赤、50%~100%の範囲を青にしたい場合は下記の書き方になります。


background:linear-gradient(90deg, red 0%, red 50%, blue 50%, blue 100%);

ポイントは範囲の始まりと終わりの部分をきちんと書かないといけません。

勿論、色は何色でも使えるので細かく設定することも可能です。

codepenでサンプルを作ったので良かったらどうぞ
codepen

-技術

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

【AWS】mysqldump&S3バックアップ。それは一瞬の出来事

こんにちは、中田です。 RDSでしっかりとバックアップ! とまでしなくていい場合 …

【Rails】ActionController::InvalidAuthenticityToken (ELB,EC2)

どうも中田です。 また出ました。赤い画面。 日々いろんなサイトを見てますが、この …

[Rails] モデルが初期化されてないとな(not initialized)

どうも中田です Railsで、modelの initialize に処理を追加す …

[XCode] clang: error: linker command failed with exit code 1

どうも中田です 本日はシンプルに。 XCodeでbuild時に発生しました。 エ …

どうも中田です。 Let’s Encryptって無料だし便利ですよね …