How do I add gradient background to my triangle?

Question

This is the triangle:

.triangulo { width: 0; height: 0; border-right: 100px solid transparent; border-top: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 100px solid #f0ad4e; }

And this is the gradient:

background: #2b5876; 
background: -webkit-linear-gradient(to right, #4e4376, #2b5876);
background: linear-gradient(to right, #4e4376, #2b5876);

Answer 1

Do NOT use multiple "background" property, for 1element

Answer 2

Well, for browser compatability, when you are using gradients, it is a good idea to list the non-gradient background first as a fallback in case the subsequent gradient ones can't be read.

However, having more than one gradient background is confusing to a person reading the code as only the last one will be read by the browser.

Adding reference:

https://css-tricks.com/examples/CSS3Gradient/