Is it possible to set the gradient in a CSS background using unanchored start and end positions?

问题

In an SVG gradient you can set the start x y and end x y position. Is it possible to do that in CSS linear gradient but using unanchored, independent start and end positions (images shown below)?

Here is my CSS linear gradient:

#rectangle {
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(225deg, rgba(255,255,255,1) 0%, rgba(250,0,0,1) 27.59%, rgba(108,22,95,1) 76.35%, rgba(39,32,32,1) 100%)
}

<div id="rectangle">

</div>

Here is the expected output in a square:

Expected output in a rectangle

I've been referencing this page on MDN and this page on W3C.

The SVG contains the orientation of the gradient

x1="1" x2="0.5" y1="0" y2="0.5"

The element also takes several other attributes, which specify the size and appearance of the gradient. The orientation of the gradient is controlled by two points, designated by the attributes x1, x2, y1, and y2. These attributes define a line along which the gradient travels. The gradient defaults to a horizontal orientation, but it can be rotated by changing these. Gradient2 in the above example is designed to create a vertical gradient. - from https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients

From other documentation:

X and Y position of the start of the gradient line, as a multiple of the object's bounding box: X=0 indicates the left edge of the bounding box and X=1 indicates the right edge. The gradient line may start or end outside the object's bounding box, so values may be < 0 or > 1.

There also may be going a pre transform / post transform issue.

In my project I get the width and height of the square / rectangle, the start and end points (gradient lines), the color stop colors and the color stop ratios. The gradient lines are different each time.

回答1:

You can consider the use of calc() where you will combine pixel and percentage value. The percentage value will define the reference and the pixel will define the gradient length and you multiple the length with the percentage of each color:

.rectangle {
  width: 200px;
  height: 100px;
  display:inline-block;
  border:1px solid;
  
  background: linear-gradient(225deg, 
    rgba(255,255,255,1) calc(50% - 70px*(1 - 0)), 
    rgba(250,0,0,1)     calc(50% - 70px*(1 - 0.2759)), 
    rgba(108,22,95,1)   calc(50% - 70px*(1 - 0.7635)), 
    rgba(39,32,32,1)    calc(50% - 70px*(1 - 1)))
}

<div class="rectangle">

</div>

<div class="rectangle" style="width:100px;">

</div>

<div class="rectangle" style="width:300px;">

</div>

In the above I made the end point at 50%. You can do the same for the starting point:

.rectangle {
  width: 200px;
  height: 100px;
  display:inline-block;
  border:1px solid;
  
  background: linear-gradient(225deg, 
    rgba(255,255,255,1) calc(50% + 70px*0), 
    rgba(250,0,0,1)     calc(50% + 70px*0.2759), 
    rgba(108,22,95,1)   calc(50% + 70px*0.7635), 
    rgba(39,32,32,1)    calc(50% + 70px*1))
}

<div class="rectangle">

</div>

<div class="rectangle" style="width:100px;">

</div>

<div class="rectangle" style="width:300px;">

</div>

来源：https://stackoverflow.com/questions/57617607/is-it-possible-to-set-the-gradient-in-a-css-background-using-unanchored-start-an

标签

html

css

svg

linear-gradients