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

诀窍是在边框外做一个三角形。由于 CSS 不允许在 border-width 中使用百分比，我使用 100vh 而不是 100%。

请试试这个：

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

Answer 2

你可以稍微模糊一下边缘

.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 ....

Answer 3

为什么不尝试不使用渐变属性使用 border-width.I 已经实现了一个使用 border-width 的方法，它使边界更加清晰。这是可运行的版本。

.triangle {
    width: 100%;
    height: 120px;
    background: linear-gradient(to right bottom, blue 50%, transparent 50%);
}
.container{
  width : 300px;
}
.triangleUsingbordermethod {
    
    border-top-color: blue;
    border-top: 60px solid blue;
    border-left: 50% solid black;
    border-left: 150px solid blue;
    border-right: 150px transparent solid;
    border-bottom: 60px transparent solid;
}

<div class='container'>
 <div class="triangleUsingbordermethod"></div>
</div>

CSS 中的三角形，整个宽度和固定高度？

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

html

css

shape