How to set inverse gradient in a single row
<p>I have fixed a similar problems with diagonal gradient.
Now it's difficult with linear.</p>

<p>I was able to create a gradiet with a cross</p>

<pre><code>background: linear-gradient(to right, transparent 40%,#f00 50%,transparent 60%), 
            linear-gradient(to bottom, #fff 20%,#f00 50%,#fff 80%);
</code></pre>

<p>I can't create a gradient that have in the left half a gradient to bottom WHITE-RED and in the right half an inverse gradient RED-WHITE.</p>

<p>The below is the way I had tried to create it:</p>

<pre><code>background: linear-gradient(to bottom, transparent 50%,#ff0 100%), 
            linear-gradient(to right, transparent 50%,#f00 100%);
</code></pre>

<p>But the yellow part is full! How can I fix this situation?</p>

<p>This is what I want:</p>

<p><a href="https://i.stack.imgur.com/RsX3f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RsX3f.png" alt="enter image description here"></a></p>