How can I make a split color box?

Question

my name is Gasper and I came across this site when looking on how to make a colour box split (2 colours in 1 box). I must say, I have 0 knowledge on how to program with html codes, so if anyone could help me I would be very happy.

And yes, I have no idea how to use this site as well, sorry. Actually, I have no idea if this is CSS or HTML, I don't even know the difference between them. As you could probably figure out, I am a complete rookie.

So my question is:

.collapse-block 
.options-swatch--color .color-brown{
  background-color: #663300;
}

How can I add 2 different colours in this code that I don't know and is it even possible?

Thank you for your help, and if I wasn't clear enough in what I want, please comment and I will respond (if that is even how this site works).

What do you mean by "a colour box split"? Like, two colours side-by-side? Top-and-bottom? Diagonally? — Terry, May 20 '18 at 11:37
I don't know what that is, not even how to use it... Can you help me? — Gasper Volk, May 20 '18 at 11:41

Terry · Answer 1 · 2018-05-20T11:45:51.583

If you want two colours in the element, one on the top and another on the bottom, just use a CSS linear gradient that runs vertically:

div {
  width: 100px;
  height: 100px;
  background-image: linear-gradient(0deg, red 50%, blue 50%);
}

<div></div>

Here's a quick run-through for the CSS linear-gradient code: linear-gradient(0deg, red 50%, blue 50%);

0deg runs from bottom to top of element
red 50% and blue 50% are color stops. It basically means "from 0–50%, use red, and from 50%-100%, use blue). You can of course use a more verbose red 0%, red 50%, blue 50%, blue 100%, but when the start and end color stops are not specified the browser simply uses the same color as the next nearest color stop.

score 0 · Answer 2 · edited May 20 '18 at 11:57

Codepen demo

Try checking out some YouTube tutorials. Search HTML Crash Course For Absolute Beginners.

This is both HTML and CSS.

To not get you confused too much. HTML is the structure, so in this example the divs you see here. And CSS is styling it, like making a text the color red, or making the text big etc.

.box1{
      width:500px;
      height:500px;
      background:#663300;
    }
    .inside{
      width:500px;
      height:250px;
      background:brown;
    }

<div class="box1">
          <div class="inside"></div>
        </div>

score 0 · Answer 3 · answered May 20 '18 at 11:45

0

There you go, this should work

/* CSS */

#box {
  width: 50px;
  height: 50px;
  background: linear-gradient(to bottom, red 50%, blue 50%);
}

<!-- HTML -->
<div id="box"></div>

answered May 20 '18 at 11:45

chinloyal

1,023
14
42

How can I make a split color box?

3 Answers3