技術

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

投稿日:

こんにちは

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

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


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

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

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

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

-技術

執筆者:


comment

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

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

関連記事

JavaScriptでクリップボードにテキストをコピーする!

こんにちは。たなかです。 ブラウザに表示されている、自動採番されたIDをクリップ …

no image

【nginx/unicorn】(13: Permission denied) while connecting to upstream

どうも中田です。 AWS上でAPIサーバを構築してて、 * Webサーバ:ngi …

no image

heroku + node.jsでError R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

こんにちは heroku + node.jsでアプリを作っていて、いざherok …

no image

[Angular]リアクティブフォームでのセレクトボックスの扱い方。

Angularはまだ本が少ないので、リアクティブフォームの説明は基本的なところも …

[JS] イベントバブリングまとめ

どうも中田です いつも忘れちゃうんですよ。 javascriptのイベントバブリ …