A triangle in CSS that takes the whole width with a fixed height?

Question

I'm trying to make a triangle in CSS that takes the whole width of the parent with a fixed height.

I successfully did so with a linear-gradient like this:

.triangle {
    width: 100%;
    height: 120px;
    background: linear-gradient(to right bottom, blue 50%, transparent 50%);
}

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

But the diagonal doesn't look crisp. How could I do the same in CSS without using gradient?

Answer 1

You can blur the edge a bit

.triangle {
    width: 100%;
    height: 120px;
    background: linear-gradient(to right bottom, blue 49.5%, transparent 50%);
}

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

the border approach as mention could be done this way to be similar :

.triangle {
  width:0;
  border-style:solid;
  border-width: 0px 0px 120px 100vw;
  border-color:transparent transparent transparent blue ;
}

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

Best is to use an SVG ....