How to make a CSS triangle background on a div without using border and image? [duplicate]

An alternative is to use background linear gradient.
The trick is to set the direction to bottom right, set the first range as white (or transparent) and the second range as the color you want to triangle to be.

In the following example the first half of background is white (from 0% to 50%) and the second half (from 50% to 100%) golden yellow.

.triangle {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, #fff 0%, #fff 50%, #a48d01 50%, #a48d01 100%);
}

<div class="triangle"></div>

Please note that this property is supported only by modern browsers (IE 11+, FF 49+)