How To Color Part Of A Box

I'm trying to show the left 10% of the red and orange box, and make the rest of the background transparent(or white!). Is this possible? Please tell me how to if it is! Thanks!

Solution 1:

thy this:

.box {
  height: 100px;
  width: 400px;
  border: 1px solid #000;
  background: rgb(255,0,0);
  background: linear-gradient(90deg, red 0%, 
              red 5%, orange 5%, 
              orange 10%, white 10%, white 100%);
} 

<div class="box">
    contents
  <div>

Or If you want to hava a mix of those 2 colors within 10% range, you can try this:

.box {
  height: 100px;
  width: 400px;
  border: 1px solid #000;
  background: rgb(255,0,0);
  background: linear-gradient(90deg, red 0%, orange 10%, white 10%, white 100%);
} 

  <div class="box">
    contents
  <div>

UPDATE:

as per your comment, replace

background: linear-gradient(90deg, red 0%, orange 10%, white 10%, white 100%);

with

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

Solution 2:

Edit:

Due to OP's additional clarifying comment I have updated my answer to make the box only take up 10% of the original width.

.box {
  width: 10%;
  background: linear-gradient(90deg, red, orange);
  border: 1px black solid;
}

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

Solution 3:

You should use background-image: linear-gradient(direction, color-stop1, color-stop2, ...); try this

.box {
  border: 1px solid black;
  background: white; 
  background: linear-gradient(to right, red,orange, white 10%, white)
}  

to see only the 10% of the left portion of the entire div, you can remove the border.

Solution 4:

In a linear gradient you can specify the range. This snippet spells out the break points so that transparent starts exactly where the red/orange ends.

.box {
  background: linear-gradient(to right, red 0%, orange 10%, transparent 10%, transparent 100%);
  border: 1px black solid;
}

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

It would be possible to do this with setting a background size too on your original red/orange linear gradient.

.box {
  background: linear-gradient(to right, red, orange);
  background-size: 10% auto;
  background-repeat: no-repeat no-repeat;
  border: 1px black solid;
}

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

Solution 5:

consider pseudo element and clip-path:

.box {
  border: 1px black solid;
  position: relative;
  z-index: 0;
}

.box:before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0; /* cover all the box */
  background: linear-gradient(to right, red, orange);
  clip-path:inset(0 90% 0 0); /* cut 90% from the right */
}

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