CSS中的三角形,整个宽度是否具有固定高度？

Question

我正在尝试在CSS中创建一个三角形,它使父级的整个宽度具有固定的高度.

我用这样的线性渐变成功地做到了这样:

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

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

但对角线看起来并不清晰.如何在不使用渐变的情况下在CSS中执行相同的操作？

Answer 1

你可以稍微模糊边缘

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

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

提到的边界方法可以这样做:

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

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

最好是使用SVG ....