stckpete - 2 years ago 115
CSS Question

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%);
``````

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>``````

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download