半分だけ色が違うボックスをCSSかHTMLで作りたい

Question

前提・実現したいこと

CSSかHTMLで、画像のような半分だけ色が変わったボックスを作りたいのですが、どうすれば作れるのか、いくらぐぐってもわかりません。ジェネレーターでも、半分だけ色が変わったボックスは作れませんし…。

Answer 1

CSSグラデーションを使えばいいでしょう。

css グラデーション - Google 検索

<div class="box"></div>

.box {
  width: 600px;
  height: 200px;
  border: 1px solid;
  background: linear-gradient(to right, #09529f 50%, #FFF 50%);
}

少し解説しておきます。
上記のグラデーションは
background: linear-gradient(to right, #09529f 0%, #09529f 50%, #FFF 50%, #FFF 100%);
を省略記述したものです。
%で変化する位置を決めることができますので、左から 0%から50%までは#09529f、50%から100%までは#FFFという意味になります。

---

コメントより

左の青いボックスに文字を入れたい場合はコードのどこに文字を入れればいいんですか？

下記のような感じで。

<div class="box">
    <p>テキストテキスト</p>
</div>

.box p {
  width: 50%;
}

Comments

[AmiI]

ありがとうございます！
ちなみにですが、左の青いボックスに文字を入れたい場合はコードのどこに文字を入れればいいんですか？

[yambejp]

左の青いボックスなんてものは存在しません。
そういうのが希望であれば最初から２つのDIVを用意してください

[hatena19]

いちおう回答したけど、yambejpさんのコメントに同意。
無理に複雑にせずに自分ができる範囲でシンプルに考えればいいと思います。