How to do with CSS a Linear-Gradient that has values in PX and% at the same time?

Question

How to do with CSS a Linear-Gradient that has values in PX and% at the same time?

Navigation

#1 by (3 votes)

2

I have a situation that is as follows, I have linear-gradiente in an element, however I want the first and last part of this gradient to have 100px of a single color, and the middle of it is always 100% complete by a another color.

To make it clear, I made this image. Note that using 10% 90% 10% , if the element is of widths other than the width of the left and right "column" will change proportion.

WhatIwantedwas100px100%100px,withafixedvaluethatshouldnotchangeiftheelementiswiderornarrower...

ThenhowwouldImergevaluesinPXand%intothegradientsoastohavethefirstandlastpartwithvaluesinPXthatwillnotvaryaccordingtowidth,butwiththemiddleoccupyingtherestofspace?

HereisthecodeIusedintheexamples:

.box {
    width: 50%;
    height: 100px;
    border: 1px solid #000;
    background-image: linear-gradient(to right, red 10%, blue 10%, blue 90%, red 90%);
}
.box:nth-child(2) {
    width: 25%;
}

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

html5 css css3

asked by anonymous 23.11.2018 / 15:58

1 answer

score 3 · Accepted Answer

As I did not have an answer, I'll post the solution I got to solve the problem.

I used a calc() function in the middle color of the gradient to determine that its size would be 100% - 50px , where 50px and the width I'd like to have in the last part of the gradient. This way I got two fixed-size "columns", since they are not in % , with values in percentage the width of the "columns" varies according to the width of the container .

The result looks like this

Codeaspictureabove:

.box {
    width: 50%;
    height: 100px;
    border: 1px solid #000;
    background-image: linear-gradient(to right,red 50px, blue 50px, blue calc(100% - 50px), red calc(100% - 50px))
}
.box:nth-child(2) {
    width: 25%;
}

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