If you want to apply border to the triangle read this: Create a triangle with CSS?

Almost all the answers focus on the triangle built using border so I am going to elaborate the linear-gradient method (as started in the answer of @lima_fil).

Using a degree value like 45° will force us to respect a specific ratio of height/width in order to obtain the triangle we want and this won't be responsive:

.tri { width:100px; height:100px; background:linear-gradient(45deg, transparent 49.5%,red 50%); /*To illustrate*/ border:1px solid; } Good one <div class="tri"></div> bad one <div class="tri" style="width:150px"></div> bad one <div class="tri" style="height:30px"></div>

Instead of doing this we should consider predefined values of direction like to bottom , to top , etc. In this case we can obtain any kind of triangle shape while keeping it responsive.

1) Rectangle triangle

To obtain such triangle we need one linear-gradient and a diagonal direction like to bottom right , to top left , to bottom left , etc

.tri-1,.tri-2 { display:inline-block; width:100px; height:100px; background:linear-gradient(to bottom left, transparent 49.5%,red 50%); border:1px solid; animation:change 2s linear infinite alternate; } .tri-2 { background:linear-gradient(to top right, transparent 49.5%,red 50%); border:none; } @keyframes change { from { width:100px; height:100px; } to { height:50px; width:180px; } } <div class="tri-1"></div> <div class="tri-2"></div>

2) isosceles triangle

For this one we will need 2 linear-gradient like above and each one will take half the width (or the height). It's like we create a mirror image of the first triangle.

.tri { display:inline-block; width:100px; height:100px; background-image: linear-gradient(to bottom right, transparent 49.5%,red 50%), linear-gradient(to bottom left, transparent 49.5%,red 50%); background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/ background-position:left,right; background-repeat:no-repeat; animation:change 2s linear infinite alternate; } @keyframes change { from { width:100px; height:100px; } to { height:50px; width:180px; } } <div class="tri"></div>

3) equilateral triangle

This one is a bit tricky to handle as we need to keep a relation between the height and width of the gradient. We will have the same triangle as above but we will make the calculation more complex in order to transform the isosceles triangle to an equilateral one.

To make it easy, we will consider that the width of our div is known and the height is big enough to be able to draw our triangle inside ( height >= width ).

We have our two gradient g1 and g2 , the blue line is the width of the div w and each gradient will have 50% of it ( w/2 ) and each side of the triangle sould be equal to w . The green line is the height of both gradient hg and we can easily obtain the formula below:

(w/2)² + hg² = w² ---> hg = (sqrt(3)/2) * w ---> hg = 0.866 * w

We can rely on calc() in order to do our calculation and to obtain the needed result:

.tri { --w:100px; width:var(--w); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 49.5%,red 50%), linear-gradient(to bottom left, transparent 49.5%,red 50%); background-size:calc(var(--w)/2 + 0.5px) calc(0.866 * var(--w)); background-position: left bottom,right bottom; background-repeat:no-repeat; } <div class="tri"></div> <div class="tri" style="--w:80px"></div> <div class="tri" style="--w:50px"></div>

Another way is to control the height of div and keep the syntax of gradient easy:

.tri { --w:100px; width:var(--w); height:calc(0.866 * var(--w)); display:inline-block; background: linear-gradient(to bottom right, transparent 49.8%,red 50%) left, linear-gradient(to bottom left, transparent 49.8%,red 50%) right; background-size:50.2% 100%; background-repeat:no-repeat; } <div class="tri"></div> <div class="tri" style="--w:80px"></div> <div class="tri" style="--w:50px"></div>

4) Random triangle

To obtain a random triangle, it's easy as we simply need to remove the condition of 50% of each one BUT we should keep two condition (both should have the same height and the sum of both width should be 100%).

.tri-1 { width:100px; height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 50%,red 0), linear-gradient(to bottom left, transparent 50%,red 0); background-size:20% 60%,80% 60%; background-position: left bottom,right bottom; background-repeat:no-repeat; } <div class="tri-1"></div>

But what if we want to define a value for each side? We simply need to do calculation again!

Let's define hg1 and hg2 as the height of our gradient (both are equal to the red line) then wg1 and wg2 as the width of our gradient ( wg1 + wg2 = a ). I will not going to detail the calculation but at then end we will have:

wg2 = (a²+c²-b²)/(2a) wg1 = a - wg2 hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

Now we have reached the limit of CSS as even with calc() we won't be able to implement this so we simply need to gather the final result manually and use them as fixed size:

.tri { --wg1: 20px; --wg2: 60px; --hg:30px; width:calc(var(--wg1) + var(--wg2)); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 49.5%,red 50%), linear-gradient(to bottom left, transparent 49.5%,red 50%); background-size:var(--wg1) var(--hg),var(--wg2) var(--hg); background-position: left bottom,right bottom; background-repeat:no-repeat; } <div class="tri" ></div> <div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

Bonus

We should not forget that we can also apply rotation and/or skew and we have more option to obtain more triangle:

.tri { --wg1: 20px; --wg2: 60px; --hg:30px; width:calc(var(--wg1) + var(--wg2) - 0.5px); height:100px; display:inline-block; background-image: linear-gradient(to bottom right, transparent 49%,red 50%), linear-gradient(to bottom left, transparent 49%,red 50%); background-size:var(--wg1) var(--hg),var(--wg2) var(--hg); background-position: left bottom,right bottom; background-repeat:no-repeat; } <div class="tri" ></div> <div class="tri" style="transform:skewY(25deg)"></div> <div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div> <div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;transform:rotate(20deg)" ></div>

And of course we should keep in mind the SVG solution which can be more suitable in some situation: