stckpete stckpete - 6 months ago 22
CSS Question

CSS3 linear gradients

Here is a linear gradient that creates triangles in the top right of bottom left of the div, however, i can't work out how to make for the top right only, i.e. remove the bottom left. can anyone help?

Here is the codepen

http://codepen.io/pete3795/pen/LZVLZK

background: linear-gradient(45deg, rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%, rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%, rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%, rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%, rgba(237,165,9,1) 95%, rgba(237,165,9,1) 100%);

Answer

Remove the one from 0% to 5% and the one from 5% to 10%

Basically here you have to imagine a page with a series of lines dividing it, rotated by 45 degrees.

So from 0% of the page to 5% (bottom left), it's orange - rgba(237,165,9,1) 0%, rgba(237,165,9,1) 5%

From 5% to 10% - grey: rgba(231,229,219,1) 5%, rgba(231,229,219,1) 10%,

From 10% to 90% - light grey: rgba(240,239,235,1) 10%, rgba(240,239,235,1) 90%,

From 90% to 95% - grey: rgba(231,229,219,1) 90%, rgba(231,229,219,1) 95%,

And Finally from 95% to 100% - orange: rgba(237,165,9,1) 95%, rgba(237,165,9,1) 100%

.test {
  min-height: 17rem;
  background: linear-gradient(45deg, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 90%, rgba(231, 229, 219, 1) 90%, rgba(231, 229, 219, 1) 95%, rgba(237, 165, 9, 1) 95%, rgba(237, 165, 9, 1) 100%);
<div class="test">

</div>

Or as GCyrillus pointed out - if you would prefer to have your corner at the start of your css instead of the end, you could do the following:

.test {
  min-height: 17rem;
  background: linear-gradient(-135deg, rgba(237, 165, 9, 1) 0%, rgba(237, 165, 9, 1) 5%, rgba(231, 229, 219, 1) 5%, rgba(231, 229, 219, 1) 10%, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 100%);
}
<div class="test">

</div>